Змініть розмір зображення в Laravel за допомогою інтервенційної бібліотеки зображень

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

Зміст

Нещодавно один з наших читачів запитав, як змінити розмір зображення в Laravel. Зміна розміру зображення – звичайне завдання розробників. Розробники повинні робити це правильно. Рекомендується змінювати розмір зображень відповідно до розміру контейнера. Це допоможе вам покращити швидкість сторінки. У цій статті ми вивчаємо, як змінити розмір зображення в Laravel за допомогою бібліотеки зображень Intervention.

Бібліотека зображень Intervention забезпечує простий спосіб змінити розмір зображень. Ця бібліотека використовує GD Library та Imagick для обробки зображень під капотом.

Чому слід змінювати розмір зображень?

Візьмемо приклад з галереї. Під час роботи над галереєю ми зазвичай відображаємо невеликий ескіз у списку. Коли хтось натискає на мініатюру, ми показуємо оригінальне зображення. Тут ескізи – це версія оригінального зображення зі зміненим розміром.

Скажімо, розмір оригінального зображення становить 500 500, а контейнер мініатюр – 200 200. У цьому випадку слід змінити розмір оригінального зображення відповідно до розміру контейнера мініатюр. Використання зображення великого розміру в маленькому контейнері – погана практика. Це впливає на ефективність веб-сайту.

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

Встановлення

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

composer require intervention/image

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

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

InterventionImageImageServiceProvider::class

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

'Image' => InterventionImageFacadesImage::class

Змінити розмір зображення в Laravel

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

php artisan storage:link

Ця команда створює каталог "зберігання" під папкою "public". У папці «зберігання» ми збережемо повну та мініатюрну версію зображень.

Далі створіть форму у файлі перегляду. Я також додаю код повідомлення про успіх у файл леза.

@if (session('success'))
    <div class="alert alert-success">
        {{ session('success') }}
    </div>
@endif
<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>

Замініть заповнювач "PASS_ACTION_URL" своїм маршрутом.

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

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

Додавши фасад, ми можемо викликати функції бібліотеки Intervention Image. У наведеному нижче коді я завантажу зображення у два місця. Одним із них є оригінальне зображення в папці ‘profile_images’. Другий – у каталозі ‘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;
 
        //Upload File
        $request->file('profile_image')->storeAs('public/profile_images', $filenametostore);
        $request->file('profile_image')->storeAs('public/profile_images/thumbnail', $filenametostore);
 
        //Resize image here
        $thumbnailpath = public_path('storage/profile_images/thumbnail/'.$filenametostore);
        $img = Image::make($thumbnailpath)->resize(400, 150, function($constraint) {
            $constraint->aspectRatio();
        });
        $img->save($thumbnailpath);
 
        return redirect('image')->with('success', "Image uploaded successfully."); //change the route as per your flow
    }
}

Тут я пропорційно змінюю розмір зображення. Роблячи це, ви зберігаєте пропорції, і зображення не відрізається. Я передав ширину як 400 та висоту як 150. Ви можете змінити ці значення відповідно до ваших вимог.

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

$img = Image::make($thumbnailpath)->resize(400, 150, function($constraint) {
    $constraint->aspectRatio();
});
$img->save($thumbnailpath);

$img = Image::make($thumbnailpath)->resize(100, 100)->save($thumbnailpath);

Після цього ви отримаєте ескіз розміром 100 * 100.

Сподіваюся, ви зможете дізнатися про зміну розміру зображення в Laravel за допомогою бібліотеки Intervention Image. Будь ласка, поділіться своїми думками та пропозиціями в розділі коментарів нижче.

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

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