Загрузка и работа с изображениями в Laravel — пакет Intervention Image
Доброго времени суток. В данной статье мы рассмотрим, как используя пакет Intervention Image работать с изображениями в Laravel.
Intervention Image представляет собой библиотеку обработки изображений с открытым исходным кодом. Данная библиотека обеспечивает простую обработку и комбинирования изображений. Поддерживает две популярные библиотеки для работы с изображениями GD Library и Imagick. Интересно? Дальше мы рассмотрим, как установить и интегрировать ее в Laravel. Остановимся на основных приемах работы с изображениями.
Первое, что нам необходимо сделать это установить данный пакет.
Установка пакета Intervention Image
Первое для работы пакета необходимо:
- PHP версии не ниже 5.4
- расширение для PHP fileinfo
- одна из библиотек GD Library (>=2.0) или расширение PHP Imagick (> = 6.5.7)
Если все требования соблюдены, то можем приступить к установке.
Открываем консоль и переходим в корень нашего проекта. Выполняем команду:
composer require intervention/image
Ждем, когда будут подгружены все файлы.
Установка завершена.
Отлично пакет мы установили. Теперь перейдем к интеграции его в Laravel.
Интеграция пакета Intervention Image в Laravel
Открываем файл config/app.php
И в providers добавляем:
… 'providers' => [ … Intervention\Image\ImageServiceProvider::class, … ], …
Дальше в alias добавляем
… 'aliases' => [ … 'Image' => Intervention\Image\Facades\Image::class, … ], …
Все теперь класс изображения будет автоматически загружен Laravel.
Конфигурация Intervention Image
Первое, что надо сделать это создать файл конфигурации. Для этого открываем консоль и переходим в корень нашего проекта. Выполняем команду:
php artisan vendor:publish --provider="Intervention\Image\ImageServiceProviderLaravel5"
Файл конфигурации скопирован из пакета в папку с конфигурациями Laravel. Давайте откроем файл config/image.php
<?php return array( /* |-------------------------------------------------------------------------- | Image Driver |-------------------------------------------------------------------------- | | Intervention Image supports "GD Library" and "Imagick" to process images | internally. You may choose one of them according to your PHP | configuration. By default PHP's "GD Library" implementation is used. | | Supported: "gd", "imagick" | */ 'driver' => 'gd' );
Тут мы можем изменять только библиотек для обработки изображений (gd или imagik)
У меня стоит библиотека gd, поэтому я ничего менять не буду.
Обработка изображений в Laravel.
Давайте сделаем функционал загрузки картинок. Изображения будут храниться в public/upload (если нет такого каталога, то создаем). А ссылки на картинки будут храниться в базе данных, в таблице images. За загрузку, обработку и вывод изображений будет отвечать контроллер ImageController. Отлично, задача поставлена.
Первое настраиваем подключение к базе данных в файле .env, который находится в корне проекта. (я на этом останавливаться не буду).
Создаем миграцию CreateImagesTable. Для этого выполняем в консоли следующую команду :
php artisan make:migration CreateImagesTable --create=images
Открываем только, что созданную миграцию.
И в метод up добавляем:
Schema::create('images', function (Blueprint $table) { $table->increments('id'); $table->string('title'); $table->string('img'); $table->timestamps(); });
Т.е. при выполнении миграции мы дополнительно к стандартным полям добавим, поле «title» и поле «img».
Выполняем миграцию:
php artisan migrate
Теперь давайте создадим модель Image, которая будет работать с нашей таблицей.
php artisan make:model Image
Открываем только, что созданную модель и добавляем в нее следующий код:
<?php namespace App; use Illuminate\Database\Eloquent\Model; class Image extends Model { protected $table = 'images'; protected $fillable = [ 'title', 'img' ]; }
Теперь создадим контроллер ImageController:
php artisan make:controller ImageController --resource
Открываем только, что созданный контроллер.
Метод index будет выводить все картинки. Давайте опишем его:
public function index() { $images = Image::all(); return view('images.index',['images' => $images]); }
Получаем из модели Image все изображения и передаем их в шаблон index.blade.php, который находится папке images. И не забываем прописать:
use App\Image;
Давайте создадим вьюшку. Переходим в каталог resources/views и создаем папку images, а уже в ней создаем файл index.blade.php.
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <title>Работа с изображениями в Laravel</title> <link href="{{ asset('css/bootstrap.min.css') }}" rel="stylesheet"> <style type="text/css"> table, th, td{ border: 1px solid; padding: 5px; } </style> </head> <body&> <div class="container"> <table> <thead> <tr> <th>ID</th> <th>Название</th> <th>Картинка</th> </tr> </thead> @foreach($images as $image) <tr> <td>{{ $image->id }}</td> <td>{{ $image->title }}</td> <td><img src="{{ asset('upload/'.$image->img) }}"> </td> </tr> @endforeach </table> </div> </body> </html>
Осталось добавить роут:
… Route::resource('/images','ImageController'); …
Проверяем:
Картинок пока нет.
Теперь давайте опишем метод create контроллера ImageController, который будет возвращать нам вьюшку с формой добавления картинки.
public function create() { return view('images.create'); }
И создадим вьюшку create.blade.php в папке resources/views/images
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <title>Работа с изображениями в Laravel</title> <link href="{{ asset('css/bootstrap.min.css') }}" rel="stylesheet"> <style type="text/css"> table, th, td{ border: 1px solid; padding: 5px; } </style> </head> <body> <div class="container"> <form action="{{ route('images.store') }}" method="POST" enctype="multipart/form-data"> {{ csrf_field() }} <div class="form-group"> <label for="title">Введите название</label> <input class="form-control" id="title" placeholder="Название" name="title"> </div> <div class="form-group"> <label for="img">Выберите файл</label> <input id="img" type="file" multiple name="file[]"> </div> <button type="submit" class="btn btn-default">Добавить</button> </form> </div> </body> </html>
Теперь давайте опишем метод store контроллера ImageController, этот метод будет сохранять данные в базе и загружать файл.
public function store(Request $request) { $path => public_path().'\upload\\'; $file = $request->file('file'); foreach ($file as $f) { $filename = str_random(20) .'.' . $f->getClientOriginalExtension() ?: 'png'; $img = ImageInt::make($f); $img->resize(200,200)->save($path . $filename); Image::create(['title' => $request->title, 'img' => $filename]); } return redirect()->route('images.index'); }
И не забываем указать
use Intervention\Image\Facades\Image as ImageInt;
Общий принцип загрузки файлов в Laravel вы можете прочитать в статье «Загрузка файлов в Laravel».
Мы вызываем метод make в который передаем путь к файлу. Теперь мы с файлом можем сделать:
- обрезать, что мы и делаем дальше
- сохранить
- редактировать
Более подробно, что позволяет делать пакет Intervention Image вы можете прочитать на официальном сайте
Давайте проверим, что у нас получилось. Открываем форму добавления файла.
Вводим название. Выбираем файл. И жмем «Добавить»
Файл загружен. (Вы можете перейти в папку public/upload и уавидеть, что файл находится там)
Заключение.
Мы с вами установили пакет Intervention Image с помощью composer. Затем подключили его к Laravel. Скопировали конфигурационной файл.
Создали контроллер для отображения и загрузки файлов. И при сохранении файла отредактировали его с помощью пакета Intervention Image
Сделала всё точно так же. Но, когда нажимаю кнопку «добавить», переходит на страницу public/images/ и выдает ошибку 403 «Доступ запрещён!
У Вас нет прав доступа к этой директории. Отсутствует индексный файл, или директория недоступна для чтения.»
Какая ОС? Файл появляется в этой директории? И проверьте права доступа к ней.
После команды
php artisan make:migration CreateImagesTable —create=images
выдает
Unable to locate publishable resources.
Publishing complete.
файла config/image.php не нахожу
версия Laravel 7
Добрый день. Т.е. получается даже миграцию не создает? Попробуйте запустить команду php artisan, выдаст список команд?