AI CSS Golang JavaScript Laravel Linux MongoDB MySQL PHP Python Rust Vue

Managing Image Uploads and Resizing with Laravel and Intervention Image

2 min read .

When developing web applications, managing images is often a crucial aspect to consider. From uploading to resizing images to fit various needs, proper management is essential. How to manage image uploads and resizing using Laravel and the Intervention Image package.

Introduction

The Intervention Image package is a popular image manipulation library among Laravel developers. With this package, we can perform various operations on images, such as resizing, cropping, encoding, and more. Here is an example code for uploading and managing images in a Laravel application.

Installing Intervention Image Package

To use the Intervention Image package in your Laravel application, you need to install it first via Composer. Here’s how to install it:

composer require intervention/image

Once the package is installed, you can start using it in your Laravel project.

Uploading and Resizing Images

use Image;
use Illuminate\Support\Facades\Storage;

public function uploadImage($image, $resize, $quality)
{
    $filename = uniqid() . '.webp';
    $fileImage = Image::make($image)->encode('webp', (int)$quality);

    if ((int)$resize[0] && (int)$resize[1]) {
        $imageResize = Image::make($image)->fit((int)$resize[0], (int)$resize[1])->encode('webp', (int)$quality);
    } else {
        $imageResize = Image::make($image)->resize((int)$resize[0] ? (int)$resize[0] : null, (int)$resize[1] ? (int)$resize[1] : null, function ($constraint) {
            $constraint->aspectRatio();
        })->encode('webp', (int)$quality);
    }

    Storage::disk(env('DRIVER_FILE_SYSTEM'))->put(env('PATH_IMAGE') . $filename, $fileImage);
    Storage::disk(env('DRIVER_FILE_SYSTEM'))->put(env('PATH_THUMBNAIL') . $filename, $imageResize);

    return [
        'file_name' => $filename
    ];
}

The code above illustrates how to upload and resize images in Laravel. Let’s break down the key steps in this code:

  1. Creating a Unique Filename: Using uniqid() to create a unique filename ending with .webp. The .webp extension is chosen because this format is more efficient for image compression.

  2. Resizing the Image: The first condition checks if both resize dimensions (width and height) are provided. If so, the image is resized to those dimensions using the fit() method. If one dimension is not provided, the resize() method is used to resize the image while maintaining the aspect ratio.

  3. Saving the Image: After processing the image, it is saved using Storage::disk() which gets the disk and storage path values from the .env file.

Deleting Images

In addition to uploading, we often need to delete images from storage. Here’s the code to do that:

public function removeImage($file)
{
    $checkImage = Storage::disk(env('DRIVER_FILE_SYSTEM'))->exists(env('PATH_IMAGE') . $file);
    $checkThumbnail = Storage::disk(env('DRIVER_FILE_SYSTEM'))->exists(env('PATH_THUMBNAIL') . $file);

    if ($checkImage) {
        Storage::disk(env('DRIVER_FILE_SYSTEM'))->delete(env('PATH_IMAGE') . $file);
    }
    if ($checkThumbnail) {
        Storage::disk(env('DRIVER_FILE_SYSTEM'))->delete(env('PATH_THUMBNAIL') . $file);
    }
}

The code above will check if the image and thumbnail files exist in the specified storage directories, and if found, they will be deleted.

Example Usage

Here are some examples of how to call the uploadImage function with different parameters:

$this->uploadImage($request->image, [600, 360], 75);
// or
$this->uploadImage($request->image, [350, null], 75);
// or
$this->uploadImage($request->file('image'), [350, null], 75);

In the examples above, we call the uploadImage function with various sizes and image quality according to the application’s needs.

Conclusion

Managing images in a web application can be a complex task if not done correctly. However, with the help of Laravel and Intervention Image, we can easily manage image uploads, resizing, and deletions. By following the steps above, you will be able to handle image management in your Laravel application more efficiently.

Tags:
Laravel
chevron-up