In this post we will discuss about the installation of 'Intervention Image' package for laravel. This package is very useful for doing image manipulations at server end and it is widely used. Let's see how to install and configure it.
Step-1
Type the following command at command prompt to install 'Intervention Image' package. Note that this package is not made to use with Laravel framework directly. We must integrate it manually to work with our Laravel pacakge.
composer require intervention/image
Read this: What is composer and how to install it?
Step-2
After installing the intervention image open Laravel config file present at config/app.php and in the $providers array add the Service provider of this pacakage as below.
Intervention\Image\ImageServiceProvider::class,Now we have to add an aliase of this package as a facade so that it can be used directly using this alias name in our application. To add this under the same config file present at config/app.php under $aliases array add the following line.
'Image' => Intervention\Image\Facades\Image::class,We can now use the Image class in our application by just calling use Image;
Let's see important methods of Intervention Image Class
1.Image resize Both Width and Height
To resize the image along width and height the Image Class use is as below. Here resize(120,200) method will do the resize of the image, 120 represents width and 200 represents height of image after resize. $uploadedimagepath represents the original path of image which is to be resized. The resize image is saved using save() method at $resizedimagesavepath location/path.
Image::make($uploadedimagepath)->reszie(120,200)->save($resizedimagesavepath);2.Image resize along either Width or Height
To resize the image along height only keep width as 'null' in the resize(null,200) method.
Image::make($uploadedimagepath)->reszie(null,200)->save($resizedimagesavepath);To resize the image along width only keep height as 'null' in the resize(120,null) method.
Image::make($uploadedimagepath)->reszie(120,null)->save($resizedimagesavepath);3.Image resize along either Width or Height and keep aspect ratio intact
To resize the image along height and keep the image aspect ratio intact keep width as 'null' in the resize(null, 200, function ($constraint) {$constraint->aspectRatio();}) method. Here we are calling 'aspectRatio()' to keep the image aspect ratio intact.
Image::make($uploadedimagepath)->resize(null, 200, function ($constraint) {$constraint->aspectRatio();})->save($resizedimagesavepath);To resize the image along width and keep the image aspect ratio intact keep height as 'null' in the resize(null, 200, function ($constraint) {$constraint->aspectRatio();}) method. Here we are calling 'aspectRatio()' to keep the image aspect ratio intact.
Image::make($uploadedimagepath)->resize(120, null, function ($constraint) {$constraint->aspectRatio();})->save($resizedimagesavepath);4.Usage of fit() in Image class to crop and resize
When we want to crop the image and resize then we can use fit(120,200) which will crop the uploaded image and resize to provided aspect ratio.
Image::make($uploadedimagepath)->fit(120, 200)->save($resizedimagesavepath);If we want to crop certain part of image and the resize to fit as per our requirement then inside 'fit()' a closure is called with the position of the image as return value provided inside upsize(any_possible_value) method. The possible values are
- top-left
- top
- top-right
- left
- center (default)
- right
- bottom-left
- bottom
- bottom-right
Image::make($uploadedimagepath)->fit(120, 200, function ($constraint) {$constraint->upsize();})->save($resizedimagesavepath);5.Usage of exif() in Image class to read Exif image data(means image properties)
The usage of 'exif()' is as shown below. If nothing is mentioned it will show all the Exif properties of image. Mostly this method is useful to know the Orientation of original uploaded image.
Image::make($uploadedimagepath)->exif();Image::make($uploadedimagepath)->exif("Orientation");The Orientation values will be in range from 1 to 8. In common 6,8 means the image is in Landscape mode. At this point it is relevant to know another Image class method 'orientate()'.
6.Usage of orientate() in Image class to change orientation of image
This method will first check 'exif("Orientate")' by itself and then roatates image.
Image::make($uploadedimagepath)->orientate()->save($resizedimagesavepath);We will see an example below when we want to change the image orientation only when the image is in landscape mode.
$img_orientation = Image::make($uploadedimagepath)->exif("Orientation");
if($img_orientation == 6 || $img_orientation == 8)
{
$image_rotate = Image::make($uploadedimagepath)->orientate()->save($resizedimagesavepath);
}
7.Usage of insert() in Image class mainly to overlay image over image.
This method comes very handy when we want to insert a watermark automatically after image is uploaded. The usage of this method is as shown below.
Image::make($uploadedimagepath)->insert($overlay_image_path, $position_of_overlay, $x_axis_offset, $y_axis_offset);$overlay_image_path is the path of the image to be overlayed on the uploaded image. $position_of_overlay tells to which position it should be overlayed. It takes the following values.
- top-left (default)
- top
- top-right
- left
- center
- right
- bottom-left
- bottom
- bottom-right
$x_axis_offset, $y-axis_offset are the offset values at which postion the image is to be overlayed. This offset is taken w.r.t $position_of_overlay value. Default value is '0,0'.
To better understand let's see the example code below to overlay company logo on uploaded image at 'bottom-right' position and with offsets '6,6'.
Image::make(public_path('storage/uploaded_images/image1.jpg'))->insert(public_path('storage/images/logo_water_mark.png'), 'bottom-right', 6, 6);Hope now you could able to use the Image Class efficiently and do the required transformations. Thank you.