Доброго времени суток. В данной статье мы рассмотрим, как используя пакет 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