Как загружать и сжимать изображения в Laravel

Последнее обновление Июл 12, 2021

Содержание

Сжимайте изображения с помощью TinyPNG в Laravel

Сжимайте изображения с помощью reSmush.it в Laravel

Вы ищете, как загружать и сжимать изображения в Laravel? Laravel предоставляет простой способ загрузки файлов. И сжатие изображений во время загрузки — хорошая практика. В этой статье я покажу вам, как загружать и сжимать изображения в Laravel.

Зачем нужно сжимать изображения?

Изображения играют важную роль на вашем сайте. Изображения улучшают пользовательский интерфейс и привлекают внимание посетителей. Но в то же время это также может снизить производительность сайта. Тяжелые изображения замедляют работу сайта. В результате ваш сайт долго загружается. Пользователи не любят медленные сайты. Если вашему сайту требуется больше времени для загрузки, высока вероятность того, что вы потеряете свою аудиторию. Стандартное время загрузки веб-сайта — 2 секунды. Вы должны позаботиться о том, чтобы ваш сайт загрузился в течение 2 секунд.

Хотя есть несколько факторов, которые необходимо учитывать, чтобы повысить скорость страницы, один из них — использование оптимизированных изображений. Сжатие изображений уменьшает размер исходного изображения без потери качества. Это помогает увеличить скорость сайта.

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

Загрузка изображений в Laravel

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


php artisan storage:link

Эта команда создает каталог хранилища в папке общего доступа.

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


<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’, если он не существует.

Как было сказано ранее, лучше оптимизировать изображение во время загрузки. Мы закончили с кодом загрузки изображения. Теперь нам нужно его сжать. Я собираюсь рассказать о двух сервисах — TinyPNG и reSmush.it, которые предоставляют API для сжатия изображений на лету. Посмотрим на них одного за другим.

Сжимайте изображения с помощью TinyPNG в Laravel

Чтобы сжимать изображения с помощью TinyPNG API, вам необходимо получить ключ 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