Як завантажувати та стискати зображення в Laravel

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

Зміст

Стискайте зображення за допомогою TinyPNG у Laravel

Стискайте зображення за допомогою reSmush.it у Laravel

Шукаєте, як завантажувати та стискати зображення в Laravel? Laravel забезпечує простий спосіб завантаження файлів. А стиснення зображень під час завантаження – хороша практика. У цій статті я покажу вам, як завантажувати та стискати зображення в Laravel.

Навіщо потрібно стискати зображення?

Зображення відіграють важливу роль на вашому веб-сайті. Зображення додають кращого UX та привабливого досвіду для відвідувачів. Але в той же час це також може вбити ефективність сайту. Важкі зображення сповільнюють роботу сайту. Як результат, ваш сайт завантажується довго. Користувачі не люблять повільні веб-сайти. Якщо для завантаження вашого веб-сайту потрібно більше часу, велика ймовірність втратити аудиторію. Стандартний час завантаження веб-сайту становить 2 секунди. Слід подбати про те, щоб ваш сайт завантажувався протягом 2 секунд.

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

Сказавши це, давайте подивимось, як завантажувати та стискати зображення в Laravel.

Завантаження зображень у Laravel

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

php artisan storage:link

Ця команда створює каталог "зберігання" під папкою "public".

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

<form action="{{ url('ROUTE_HERE') }}" 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>

У наведеному вище HTML-файлі я додав файл, що вводиться з назвою ‘profile_image’. Я також додав, {{ csrf_field() }}що потрібно для подання форм Laravel.

Тепер, припускаючи, що ви надсилаєте запит на пост до store()методу вашого контролера, напишіть код, який зберігає зображення на сервері, як показано нижче.

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);
 
        //Compress Image Code Here
 
        return redirect('ROUTE_HERE')->with('success', "Image uploaded successfully.");
    }
}

Цей код створює унікальне ім’я файлу і зберігає файл у каталозі ‘profile_images’. Laravel автоматично генерує каталог ‘profile_images’ у розділі ‘public / storage’, якщо він не існує.

Як уже було сказано раніше, є кращою практикою оптимізувати зображення під час завантаження. Ми закінчили з кодом завантаження зображення. Тепер нам потрібно його стиснути. Я збираюся охопити 2 послуги – TinyPNG та reSmush.it, які надають API для стиснення зображень на льоту. Давайте побачимо їх по одному.

Стискайте зображення за допомогою TinyPNG у Laravel

Щоб стиснути зображення за допомогою API TinyPNG, потрібно отримати ключ API. Процес прямий. Зареєструйте свою електронну адресу у них, і вони надішлють ваш ключ розробника.

Отримавши ключ API, додайте його у .envфайл.

Після цього встановіть пакет TinyPNG, використовуючи команду:

composer require tinify/tinify

Після встановлення пакету ми повинні написати код, який стискає завантажене зображення за допомогою TinyPNG.

Напишіть код стиснення трохи нижче рядка, який завантажує зображення.

//Compress Image Code Here
$filepath = public_path('storage/profile_images/'.$filenametostore);
 
try {
    TinifysetKey(env("TINIFY_API_KEY"));
    $source = TinifyfromFile($filepath);
    $source->toFile($filepath);
} catch(TinifyAccountException $e) {
    // Verify your API key and account limit.
    return redirect('ROUTE_HERE')->with('error', $e->getMessage());
} catch(TinifyClientException $e) {
    // Check your source image and request options.
    return redirect('ROUTE_HERE')->with('error', $e->getMessage());
} catch(TinifyServerException $e) {
    // Temporary issue with the Tinify API.
    return redirect('ROUTE_HERE')->with('error', $e->getMessage());
} catch(TinifyConnectionException $e) {
    // A network connection error occurred.
    return redirect('ROUTE_HERE')->with('error', $e->getMessage());
} catch(Exception $e) {
    // Something else went wrong, unrelated to the Tinify API.
    return redirect('ROUTE_HERE')->with('error', $e->getMessage());
}

Наведений вище код бере зображення із завантаженого каталогу, відправляє його на сервер TinyPNG для стиснення і після отримання відповіді зберігає стиснене зображення в тому ж каталозі.

Цей процес працює у фоновому режимі. Вам не потрібно турбуватися про те, як зображення надходить на сервер TinyPNG, як воно отримує відповідь API. Бібліотека TinyPNG виконує всі завдання за вас.

Спробуйте завантажити зображення зараз, і ви побачите, як ваше зображення стискається.

Стискайте зображення за допомогою reSmush.it у Laravel

TinyPNG працює добре, але він має обмеження щодо оптимізації 500 безкоштовних зображень на місяць. Якщо ви хочете стиснути більше 500 зображень, вам потрібно заплатити за них. Крім того, користувачі можуть вибрати безкоштовну послугу reSmush.it для стиснення зображення. На момент написання цієї статті reSmush.it стискає понад 7 мільярдів зображень. Цього достатньо, щоб сказати про популярність цієї послуги.

Отже, напишіть код, який стискає зображення за допомогою reSmush.it у Laravel.

//Compress Image Code Here
$filepath = public_path('storage/profile_images/'.$filenametostore);
$mime = mime_content_type($filepath);
$output = new CURLFile($filepath, $mime, $filenametostore);
$data = ["files" => $output];
 
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, 'http://api.resmush.it/?qlty=80');
curl_setopt($ch, CURLOPT_POST,1);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($ch, CURLOPT_CONNECTTIMEOUT, 5);
curl_setopt($ch, CURLOPT_POSTFIELDS, $data);
$result = curl_exec($ch);
if (curl_errno($ch)) {
    $result = curl_error($ch);
}
curl_close ($ch);
 
$arr_result = json_decode($result);
 
// store the optimized version of the image
$ch = curl_init($arr_result->dest);
$fp = fopen($filepath, 'wb');
curl_setopt($ch, CURLOPT_FILE, $fp);
curl_setopt($ch, CURLOPT_HEADER, 0);
curl_exec($ch);
curl_close($ch);
fclose($fp);

Я передав значення якості як 80 ?qlty=80у наведеному вище коді. Ви можете грати, передаючи різні значення якості.

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

Статті, пов’язані з цим

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