Руководство по Intervention Image в Laravel

В этом руководстве вы изучите возможности библиотеки, а также получите пошаговое руководство по ее настройке в проекте Laravel. Мы также создадим простой генератор мемов, чтобы продемонстрировать, как Intervention Image можно использовать при создании приложений Laravel.

Что такое Intervention Image?

Intervention Image — это PHP-библиотека для работы с изображениями, созданная Фабьеном Потенсье, тем же разработчиком, который создал Symfony. Он поддерживает как библиотеку GD , так и Imagick , а также предоставляет современный объектно-ориентированный API, построенный на их основе.

Intervention предоставляет широкий спектр возможностей для манипулирования изображениями, в том числе:

• Применение фильтров
• Обрезка
• Рисование текста и фигур
• Перелистывание
• Изменение размера
• Rotating
• Translating
• Водяные знаки

Как установить и использовать Intervention Image в Laravel

Для установки мы будем использовать Composer , но прежде чем начать, давайте создадим проект Laravel. Запустите команду ниже, чтобы создать новый проект Laravel.

composer create-project --prefer-dist laravel/laravel intervention-tut

Теперь перейдите в папку и запустите приложение, выполнив приведенные ниже команды.

cd intervention-tut
php artisan serve

Если вы все сделали правильно, у вас должно быть работающее приложение, работающее по адресу http://localhost:8000 , обслуживающее страницу шаблона Laravel.

Теперь давайте добавим изображение Intervention в наш проект, выполнив команду ниже в новом сеансе терминала или на вкладке:

composer require intervention/image

После установки пакета нам нужно будет обновить файл config/app.php, добавив несколько фрагментов, чтобы правильно использовать Intervention. Сначала мы добавим приведенный ниже фрагмент в конец массива $providers.

Intervention\Image\ImageServiceProvider::class,

Мы также обновим $aliases массив в том же файле с помощью фрагмента ниже:

'Image' => Intervention\Image\Facades\Image::class,

Это сделает фасад «Intervention» доступным в приложении. Это все, что нам нужно сделать, чтобы Intervention полностью работал в нашем приложении.

В разделе ниже мы рассмотрим различные функции Intervention, а затем в статье мы продемонстрируем возможности Intervention, создав реальное приложение.

Ключевые функции Intervention

Intervention предоставляет широкий набор функций для манипулирования изображениями. Некоторые из наиболее распространенных функций включают в себя:

1. Resize

Этот resize() метод можно использовать для изменения размера изображений до определенной ширины и высоты. Ширина и высота могут быть указаны либо в пикселях, либо в процентах от исходного размера изображения.

Например, следующий код изменяет размер изображения до 100x100 пикселей:

$image = Image::make('path/to/image.jpg');
$image->resize(100, 100);
$image->save();

Метод resize() также поддерживает третий аргумент — качество изображения с измененным размером. Качество — это число от 0 до 100, где 0 — самое низкое качество, а 100 — самое высокое. Качество по умолчанию — 90.

Например, следующий код изменяет размер изображения до 100x100 пикселей с качеством 50:

$image = Image::make('path/to/image.jpg');
$image->resize(100, 100, 50);
$image->save();

2. Encode

Этот encode() метод можно использовать для сжатия изображений в различные форматы, включая JPEG, PNG, GIF и SVG. Формат сжатого изображения указывается в качестве первого аргумента метода encode(). В качестве второго аргумента указывается качество сжатого изображения.

Например, следующий код кодирует изображение в файл JPEG с качеством 90:

$image = Image::make('path/to/image.jpg');
$image->encode('jpeg', 90);
$image->save();

Метод encode также поддерживает третий аргумент — выходной буфер. Это строка или поток , который будет использоваться для хранения сжатого изображения. Например, следующий код сжимает изображение в файл JPEG и сохраняет сжатое изображение в переменной $compressedImage.

$image = Image::make('path/to/image.jpg');
$compressedImage = $image->encode('jpeg', 90);

3. Draw

Этот draw() метод можно использовать для рисования линий, фигур и текста на изображениях. Метод draw() принимает замыкание в качестве аргумента. Замыкание получает экземпляр класса ImageDraw, который можно использовать для рисования на изображении. Например, следующий код рисует красную линию посередине изображения:

$image = Image::make('path/to/image.jpg');
$image->draw(function($draw) {
    $draw->line(0, 0, 100, 100, function($line) {
        $line->color('#FF0000');
    });
});
$image->save();

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

Например, следующий код рисует синий прямоугольник с пунктирной границей:

$image = Image::make('path/to/image.jpg');
$image->draw(function($draw) {
    $draw->rectangle(0, 0, 100, 100, function($rectangle) {
        $rectangle->color('#0000FF');
        $rectangle->style('dashed');
    });
});
$image->save();

Другие функции Intervention

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

• GaussBlur: эта функция применяет к изображению размытие по Гауссу.
• Sharpen: эта функция повышает резкость изображения.
• Brightness: эта функция регулирует яркость изображения.
• Contrast: эта функция регулирует контрастность изображения.
• Saturation: эта функция регулирует насыщенность изображения.

Расширенное использование Intervention

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

• Создание миниатюр
• Создание спрайтов изображений
• Оптимизация изображений для использования в Интернете
• Создание анимированных GIF-файлов
• Применить пользовательские фильтры изображений

Настройте тестовое приложение

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

Для начала вам понадобится шаблон . Создайте новый каталог в изображениях с общедоступным именем . Затем загрузите шаблон и переместите его в папку public/images , переименовав его в drizzy-template.png .

Теперь замените код в resources/views/welcome.blade.php следующим.

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Meme Generator</title>
    <!-- Fonts -->
    <link rel="preconnect" href="https://fonts.bunny.net">
    <link href="https://fonts.bunny.net/css?family=figtree:400,600&display=swap" rel="stylesheet" />
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {},
            },
        };
    </script>
</head>
<body class="antialiased bg-gray-50">
    <form class="container mx-auto p-4 mt-[30px]" action="/api/create" method="post">
        <div class=" grid grid-cols-2 gap-x-[20px] items-center">
            <div class="relative">
                <p class="absolute top-[4%] left-[55%]">Section 1</p>
                <p class="absolute top-[54%] left-[55%]">Section 2</p>
                <img src="/images/drizzy-template.png" alt="drizzy template" class="w-full">

            </div>
            <div class="space-y-4">
                <div class="w-full">
                    <label for="section-1">Text for section 1</label>
                    <input type="text" id="section-1" name="section-1" class="w-full p-4 border border-gray-200 rounded-[10px]" required />
                </div>
                <div class="w-full">
                    <label for="section-2">Text for section 2</label>
                    <input type="text" id="section-2" name="section-2" class="w-full p-4 border border-gray-200 rounded-[10px]" required />
                </div>
                <Button type="submit" class="bg-blue-700 px-4 py-3 rounded-[10px] text-white">Create meme</Button>
            </div>
        </div>
    </form>
</body>
</html>

В приведенном выше коде мы использовали Tailwind CSS для оформления формы, которая будет собирать текст, который мы напишем поверх нашего шаблона. Далее мы напишем код для нашего бэкэнда.

Добавьте обновление маршрута/api.php , чтобы оно соответствовало следующему коду.

<?php

use Illuminate\Http\Request;
use Illuminate\Support\Facades\Route;
use Image;

Route::middleware('auth:sanctum')->get('/user', function (Request $request) {
    return $request->user();
});

Route::post('/create', function () {
    $img = Image::make('../public/images/drizzy-template.png');
    $section1 = $_POST['section-1'];
    $section2 = $_POST['section-2'];
    $img->text($section1, 320, 23, function ($font) {
        $font->color('#000000');
        $font->align('center');
        $font->valign('top');
    });
    $img->text($section2, 320, 270, function ($font) {
        $font->color('#000000');
        $font->align('center');
        $font->valign('top');
    });
    $img->save();
    return $img->response('jpg');
});

В коде api/create определен маршрут, который будет обрабатывать генерацию шаблона.

Теперь перейдите по адресу http://localhost:8000 , чтобы просмотреть работающее приложение. Вот пример того, что вы можете увидеть.

Затем добавьте свой собственный текст к доступным полям ввода и нажмите «Создать мем» . Это закодирует ваш собственный текст в изображение, как показано в примере ниже.

Вернувшись к своему файлу, вы заметите, что он обновлен с учетом последних изменений. Стиль Дрейка

Лучшие практики Intervention

При использовании Intervention необходимо следовать нескольким рекомендациям:

• Всегда используйте этот make() метод для создания нового объекта изображения. Это гарантирует, что изображение правильно настроено и готово к манипуляциям.
• Используйте save() метод для сохранения изображения на диск. Это гарантирует сохранение изображения в правильном формате и с правильными настройками качества.
• Используйте getClientOriginalName() метод, чтобы получить исходное имя изображения. Это поможет вам сохранить исходное изображение и избежать его перезаписи.
• Используйте getImageType() метод, чтобы получить тип изображения. Это поможет вам выбрать правильные функции манипулирования изображениями.
• Используйте getImageData() метод для получения необработанных данных изображения. Это может быть полезно для сложных задач манипулирования изображениями.

Заключение

Intervention — это мощная и универсальная PHP-библиотека для работы с изображениями, которую можно использовать для самых разных задач. Он прост в использовании и легко интегрируется с Laravel. Если вам нужно манипулировать изображениями в приложении Laravel, Intervention — отличный вариант.