Гибкая загрузка изображений в Laravel 5.3/5.4 Пакет UploadImage.

Посты / Гибкая загрузка изображений в Laravel 5.3/5.4 Пакет UploadImage.

13.02.2017 22:22

Привет, друзья. Хочу сегодня рассказать о том, как можно легко загружать/получать/удалять свои изображения в Laravel для любого типа контента. Специально для удобства работы с изображениями я написал свой пакет UploadImage. Но обо всем по порядку.

Итак, как вам известно, не один сайт не может обойтись без использования изображений. Это аксиома. Поэтому при разработке веб проекта, программист обязательно столкнется с необходимостью сохранять изображения на диск и получать изображения с диска.

По большому счету, Ларавел дает очень удобный инструментарий для этих целей. Но вот каким образом сделать автоматизированную систему сохранения изображений, в зависимости от разного типа контента, вот это уже большой вопрос. Конечно же в природе есть ряд решений для Ларавел, которые помогают в вопросе сохранения изображений, но по ряду причин они меня не устроили. Поэтому я решил написать свой "велосипед" - пакет UploadImage. Установить его можно через composer. Вот ссылка на пакет: https://github.com/kirill-dan/uploadimage

Я обожаю решения из коробки, не люблю полуфабрикатов, которые нужно потом допиливать напильником. Поэтому я и стараюсь делать максимально коробочное решение.

Для работы с изображениями я выдвинул ряд обязательных требований.

Во первых, я решил в базе данных сохранять только название файла, без пути к этому файлу. Это дает возможность в любой момент перенести ваши, уже сохраненные изображения, куда угодно. Хоть в облако, хоть на другой сервер. Прописать путь к базовому хранилищу можно в едином файле настроек. Такой подход никогда не побьет ваши ссылки, а шаблоны всегда будут знать от куда подгружать изображения.

Следующий момент - это возможность располагать изображения автоматически в разные папки, в зависимости от типа контента. Для этого я применил простой прием. В своем контроллере вы можете вызывать метод сохранения/загрузки изображения, передавая в него, помимо самого файла изображения, еще и название модели. Например,

// Upload and save image.
try {
    // Upload and save image.
    $input['image'] = UploadImage::upload($file, 'post', $watermark)->getImageName();
} catch (UploadImageException $e) {

    return back()->withInput()->withErrors(['image', $e->getMessage()]);
}

В этом случае из файла настроек будет получен путь, куда нужно сохранять изображение. Изображение будет проверено и сохранено в папку 'posts' В конец текстовой строки всегда дописывается символ s. Как это, например, происходит с миграциями и таблицами в базе данных. При чем, произойдет ряд проверок изображения, согласно настройкам. Например, чтобы файл был шириной не менее 500px. В папке 'posts' будет создана папка для оригинального изображения: 'original'. Именно в ней и будет сохранено изображение под случайным именем. И это имя будет возвращено методом одним из значений массива. Как это видно из кода.

Таким образом, изображения для разного контента будут хранится в разных директориях. Также можно в настройках включить функцию миниатюр. И указать какого размера нужно делать превьюшки. В этом случае будут созданы миниатюры и помещены рядом с папкой 'original' в свои каталоги, которые будут названы согласно размеру превьюшки с префиксом 'w', например 'w300'.

~~Еще можно в настройках включить использование водяных знаков~~ и прописать к ним свои пути. Тогда водяной знак будет автоматически ставиться на оригинальные изображения. Для нанесения водфного знака есть третий параметр $watermark (по умолчанию false). В нем можно указать true, для наклеивания водяного знака на ваше изображение. Если эту переменную вообще не передавать, то на фото не будет наклеен водяной знак.
Я специально изменил систему наклеивания ватермарка, чтобы сделать этот процесс более гибким. Может в одном типе контента нужны ватермарки, а в другом не нужны.

А если вы еще видеоролики храните на сайте, например из Ютуб, то наверняка вы захотите на картинку в тизере наложить изображение видеоплеера:

Для этого вам нужно передать в метод четвертый параметр для наложения видео, который равен true.

// Upload and save image.
try {
    // Upload and save image.
    $input['image'] = UploadImage::upload($file, 'post', false, $video)->getImageName();
} catch (UploadImageException $e) {

    return back()->withInput()->withErrors(['image', $e->getMessage()]);
}

Получить же изображение с диска очень просто. Нужно вызвать метод загрузки и передать в него строку своей модели:

$path = UploadImage::load('post');

Таким образом вы получите путь к папке, где хранится изображение, а само имя файла у вас хранится в базе. Если нужна миниатюра, то передайте в метод вторым параметром ширину миниатюры, просто цифрой.

Если же вам необходимо удалить из базы вашу запись, для которой создано изображение, то это тоже очень легко сделать:

UploadImage::delete($post->image, 'post');

Нужно передать в метод имя файла и название модели. Тогда алгоритм удалит и оригинальное изображение и все миниатюры, которые были для него сделаны.

По мимо всего прочего, очень хочется, чтобы при начальном заполнении формы была возможность увидеть загруженное изображение. Например, на вашем сайте есть возможность пользователям добавлять свои новости. Пользователь начинает заполнять форму добавления новости, выбирает фотографию, она загружается на диск. Пользователю сразу же показывается превьюшка, еще до того, как он закончил заполнение формы.

Для того, чтобы пользователю отобразить превьюшку, достаточно в шаблоне обернуть ваше поле загрузки изображения следующим образом:

<div class="image-preview-block">
    <div class="image-preview-image">div>
    {!! Form::file('image', ['class' => 'image-preview-input']) !!}
div>

Больше ни о чем думать не нужно все произойдет автоматически.

Но есть один момент, достаточно любопытный. Представим, что по каким-то причинам, пользователь решил не создавать новость и бросит эту затею. Просто закрыл страницу и все. При этом изображение уже было загружено на диск. Что же делать? Теперь это изображение будет похоронено в виде мусора.

Я решил эту проблему достаточно просто. Когда пользователь загружает изображение, то мой функционал его получает от пользователя, сохраняет на диск, потом получает из диска и перекодирует в текстовый формат Base64 и отдает его в виде превьюшки назад пользователю. А оригинальное изображение удаляет с диска. Вот и все. Если пользователь не засабмитит форму, то ничего страшного не произойдет. А если засабмитит, то изображение опять загрузится на диск.

В новом релизе заменен алгоритм. Теперь превью изображения загружается средствами браузера. Единственное что будет получено от сервера, то это только настройка для ширины превьюшки.

Но и это еще не все! Самое вкусное я оставил на закуску. Как нельзя представить современный сайт без изображений, так и нельзя, на сегодняшний день, представить сайт без WYSIWYG редактора. Никто, в здравом уме, не пишет контент в простом текстовом поле. И просто огромное количество пользователей знает лично, какая головная боль вставлять изображения в текст в самом редакторе! Для разных редакторов придуманы десятки всевозможных загрузчиков изображений, как платных, так и бесплатных. Я видел их все, или почти все. И мое личное мнение - это просто КОШМАР!!!

Я всегда раньше мечтал о том, чтобы просто нажать на кнопку вставить изображение прямо в редакторе, выбрал файл на компьютере, и изображение просто вставилось в мой текст, без вообще каких-либо дополнительных телодвижений. И еще мечтал о том, чтобы при удалении статьи, куда вставилось много изображений из редактора, ненужно ничего было бы делать. Все фотографии автоматически бы удалились с диска вместе со статьей. Ах мечты-мечты. Но хватит мечтать. Я это взял, да и сделал!

В технической документации к пакету вы найдете пример, как это можно сделать. Но суть в чем. В настройках в вашем редакторе вы указываете, какая JS функция должна загружать изображения, а какая удалять. После этого, нажав на кнопку загрузки изображения, оно будет загружено в специальную папку, которую можно настроить в файле конфигурации. Если включены водяные знаки, то на изображение он будет нанесен, а изображение будет масштабировано и сжато, согласно настроек в конфиге.

И когда вы передаете изображение из текстового редактора, то вы можете передать сразу массив изображений. Все они автоматически будут загружены и возвращены в редактор.

Когда вы находитесь в редакторе текста и нажмете на кнопку удаления изображения, то обработчик в финале вызовет метод, который удалит изображение с диска.

Все изображения в вашей статье будут содержать только относительные ссылки, поэтому переезд с сервера на сервер не побьет их. Если же вы захотите удалить статью и все изображения в ней, то вам нужно всего-навсего вызвать следующий метод:

UploadImage::deleteBody($post->body);

Вы просто передаете в метод текст, где содержаться ссылки на ваши фотографии или изображения. Метод распарсит весь текст, найдет только относительные изображения и удалит их с вашего диска. Легко и просто :)

Да, еще момент. Вылетело из головы. В метод сохранения изображений, вы можете передать не только само изображение, но и ссылку на изображение, которое хранится на каком-то сайте. Метод автоматически распознает что вы передаете. Тогда изображение будет закачено и превращено в обычное изображение на вашем диске.

Вот, в принципе, и все. Кому поможет мое решение, я буду очень рад. Лично мне оно теперь очень сильно сохраняет и время и нервы. Если есть предложения по улучшению и исправлению, то пишите в комментариях. До скорой встречи.

Рубрика: Программирование