Загрузка и работа с изображениями в Laravel — пакет Intervention Image

Ромчик
4

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

Установка 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 =&gt; 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

Понравилась статья? Поделись с друзьями.
  • Add to favorites
  • Добавить ВКонтакте заметку об этой странице
  • Twitter
  • Facebook
  • Мой Мир
  • LiveJournal
  • Одноклассники
  • Блог Я.ру
  • MySpace
  • FriendFeed
  • В закладки Google
  • Google Buzz
  • Яндекс.Закладки
  • Reddit
  • StumbleUpon
  • Technorati
  • del.icio.us
  • БобрДобр
  • LinkedIn
  • Memori.ru
  • Сто закладок
  • Blogger

  • Елизавета - 14.05.2019 в 08:56

    Сделала всё точно так же. Но, когда нажимаю кнопку «добавить», переходит на страницу public/images/ и выдает ошибку 403 «Доступ запрещён!
    У Вас нет прав доступа к этой директории. Отсутствует индексный файл, или директория недоступна для чтения.»

    • Ромчик - 14.05.2019 в 09:17

      Какая ОС? Файл появляется в этой директории? И проверьте права доступа к ней.

  • Федор - 22.04.2020 в 17:04

    После команды
    php artisan make:migration CreateImagesTable —create=images
    выдает
    Unable to locate publishable resources.
    Publishing complete.
    файла config/image.php не нахожу
    версия Laravel 7

    • Ромчик - 22.04.2020 в 21:13

      Добрый день. Т.е. получается даже миграцию не создает? Попробуйте запустить команду php artisan, выдаст список команд?

  • ©2012-2020 По всем вопросам обращайтесь через форму обратной связиПолитика конфиденциальности

    Яндекс.Метрика