Створіть мініатюру в Laravel за допомогою бібліотеки зображень Intervention

Останнє оновлення Жов 17, 2021

Зміст

На веб-сайті ми завжди маємо справу з зображеннями. Виходячи з вимоги, ми використовуємо різні версії зображень. Це хороша практика для розробників створювати різні версії, відомі як мініатюри одного зображення. Ці мініатюри можна використовувати під час відображення зображень різного розміру залежно від розміру контейнера. Показ зображення, яке відповідає розміру контейнера, економить пропускну здатність та покращує час завантаження сторінки. Показ зображення великого розміру в маленькому контейнері є поганою практикою і шкодить часу завантаження сторінки. У результаті рекомендується створити кілька ескізів зображення та використовувати відповідну версію, де це необхідно.

У цій статті ми вивчаємо, як створити ескіз у Laravel за допомогою бібліотеки зображень Intervention. Втручання Image є безкоштовною і є однією з популярних бібліотек для маніпулювання зображеннями. У фоновому режимі ця бібліотека використовує бібліотеку GD та Imagick для маніпулювання зображеннями.

Для цього підручника я створю 3 ескізи – маленький, середній, великий із розмірами 150 93, 300 * 185, 550 340 відповідно. Змініть ці розміри відповідно до ваших вимог.

Починаємо

Для того, щоб розпочати, потрібно спочатку встановити бібліотеку Intervention Image в Laravel. Відкрийте термінал у кореневому каталозі проекту та запустіть команду нижче:

composer require intervention/image

Після встановлення бібліотеки відкрийте config/app.phpфайл і додайте в нього наступні рядки.

Додайте постачальників послуг для цього пакету в $providersмасив.

InterventionImageImageServiceProvider::class

Додайте фасад до $aliasesмасиву.

'Image' => InterventionImageFacadesImage::class

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

php artisan storage:link

Ця команда створює каталог зберігання (символічне посилання) під загальною папкою. У цю папку я завантажу оригінальне зображення та його ескізи.

Створіть мініатюру в Laravel

Ми всі налаштувались на базову настройку і тепер можемо писати фактичний код. Давайте створимо форму у вашому файлі подання.

<form action="{{ url('PASS_ACTION_URL') }}" method="post" enctype="multipart/form-data">
    <div class="form-group">
        <label for="exampleInputFile">File input</label>
        <input type="file" name="profile_image" id="exampleInputFile">
    </div>
    {{ csrf_field() }}
    <button type="submit" class="btn btn-default">Submit</button>
</form>

У контролер вам потрібно додати фасад бібліотеки «Зображення», який ми додали у config/app.phpфайл.

<?php
  
namespace AppHttpControllers;
  
use IlluminateHttpRequest;
use Image;
  
class ImageController extends Controller
{
  
}

Додаючи фасад, ми можемо викликати функції бібліотеки Intervention Image. У наведеному нижче коді я завантажу зображення у два місця. Оригінальне зображення надходить безпосередньо всередину storage/profile_imagesпапки. Ескізи будуть зберігатися в storage/profile_images/thumbnailкаталозі. Спочатку завантажуємо оригінальне зображення в папку ескізів, а потім змінюємо його розмір.

public function store(Request $request)
{
    if($request->hasFile('profile_image')) {
        //get filename with extension
        $filenamewithextension = $request->file('profile_image')->getClientOriginalName();
  
        //get filename without extension
        $filename = pathinfo($filenamewithextension, PATHINFO_FILENAME);
  
        //get file extension
        $extension = $request->file('profile_image')->getClientOriginalExtension();
  
        //filename to store
        $filenametostore = $filename.'_'.time().'.'.$extension;
 
        //small thumbnail name
        $smallthumbnail = $filename.'_small_'.time().'.'.$extension;
 
        //medium thumbnail name
        $mediumthumbnail = $filename.'_medium_'.time().'.'.$extension;
 
        //large thumbnail name
        $largethumbnail = $filename.'_large_'.time().'.'.$extension;
 
        //Upload File
        $request->file('profile_image')->storeAs('public/profile_images', $filenametostore);
        $request->file('profile_image')->storeAs('public/profile_images/thumbnail', $smallthumbnail);
        $request->file('profile_image')->storeAs('public/profile_images/thumbnail', $mediumthumbnail);
        $request->file('profile_image')->storeAs('public/profile_images/thumbnail', $largethumbnail);
  
        //create small thumbnail
        $smallthumbnailpath = public_path('storage/profile_images/thumbnail/'.$smallthumbnail);
        $this->createThumbnail($smallthumbnailpath, 150, 93);
 
        //create medium thumbnail
        $mediumthumbnailpath = public_path('storage/profile_images/thumbnail/'.$mediumthumbnail);
        $this->createThumbnail($mediumthumbnailpath, 300, 185);
 
        //create large thumbnail
        $largethumbnailpath = public_path('storage/profile_images/thumbnail/'.$largethumbnail);
        $this->createThumbnail($largethumbnailpath, 550, 340);
  
        return redirect('image')->with('success', "Image uploaded successfully.");
    }
}

У наведеному вище коді я зберігаю зображення у 3 форматах – малому, середньому та великому. Після їх збереження ми викликаємо метод createThumbnailі передаємо потрібну ширину, висоту методу. Давайте визначимо цю функцію нижче. Ця функція повинна надходити в той самий контролер.

/**
 * Create a thumbnail of specified size
 *
 * @param string $path path of thumbnail
 * @param int $width
 * @param int $height
 */
public function createThumbnail($path, $width, $height)
{
    $img = Image::make($path)->resize($width, $height, function ($constraint) {
        $constraint->aspectRatio();
    });
    $img->save($path);
}

Тут ми пропорційно змінюємо розмір зображення. Роблячи це, ми зберігаємо пропорції, і зображення не буде відрізаним.

Якщо ви шукаєте твердий урожай, замініть рядки нижче

$img = Image::make($path)->resize($width, $height, function ($constraint) {
    $constraint->aspectRatio();
});
$img->save($path);

$img = Image::make($path)->resize($width, $height)->save($path);

Сподіваюся, ви розумієте, як створити ескіз у Laravel за допомогою бібліотеки Intervention Image. Я хотів би почути ваші думки в розділі коментарів нижче.

Пов’язані статті

Джерело запису: artisansweb.net