Hello everyone, welcome back to justlaravel.com. Here in this post am going to show you how to use Image Intervention tool in your Laravel applications. You might be wondering what is this Image Intervention, let me tell you, it is something like an image editing tool for your Laravel application. One can manipulate the image either by resize, blur, brighten, crop and so on using the options in the tool.
So let’s get started.
You can also watch the video on YouTube here.
Install and setup Image Intervention
In the terminal or cmd, navigate to your project and install it using composer.
Next, we have to add its service provider to the list of providers. Navigate to
config/app.php file and in the providers array add Image Intervention service provider.
also we need to add a facade of this package to the
Image Intervention in action
We have successfully installed and set up the package, now its time to get the features what it offers.
Here, with this tool, we can resize an image, add some effects like blur, change the brightness, adjusting the sharpness of the image and many more.
Instead of doing all these changes in a standard photo editing tool like Photoshop, we can do all these minor changes in our laravel application itself.
To make use of these features, I will create a simple file upload form, with some options to adjust brightness, sharpness and blur effect.
So, when the form is submitted, it takes all the options inputted above and produces the result based on them.
Image Upload form
Now let’s create an image upload form.
A basic form with an image upload field and 3 options for image editing. Blur, Brighten and Sharpen are the examples I used here.
After the form is submitted, I will display the original image and modified image beside each other on the same page, below the form.
So I will use an ajax call to pass the form data to function where the image gets modified.
In the above code snippet, when form submit is clicked an ajax call to url
/uploadPhoto is called with passing all the form data like the image itself, blur, brightness and sharpness values.
So let’s see what we can do in the
The first step is to get the image uploaded and call
make() method on it.
Next step, is to apply brightness, contrast and blur effects to it, also I will encode it to png format.
The last step is to convert it into base64 format.
Finally, return the image. As we are dealing with ajax, just echoing will do.
The complete function is as below.
Display the image
I will create a new div element just below the form.
Now, in the ajax, success function, I will append the image to this div element.
The complete submit function is as below.
The final result is as below. Right side image is the modified image and the left side image is the original image.