Wern Ancheta

Adventures in Web Development.

Using the Intervention Image Library in PHP

| Comments

In this tutorial I’ll be showing you how to manipulate images in PHP using the Intervention Image library. In the PHP applications that I write, I primarily use intervention image for resizing images into smaller one’s. But aside from that, there are other things that this library can do.

Installation and Setup

To use intervention image, you need to have ImageMagick installed. In Ubuntu, you can do that by executing the following command from your terminal:

1
sudo apt-get install imagemagick

On your working directory, execute the following to install Intervention Image.

1
composer require intervention/image

This command uses Composer. If you don’t have it already, check out the downloads page and install it on your system.

Create a new PHP file and name it tester.php. This will be the file that you’re going to use for the rest of this tutorial.

To use the library, require the autoload file in the vendor directory. This allows you to include the Intervention Image library into your current file. You can then give an alias to the ImageManagerStatic class and use it for manipulating images.

1
2
3
4
5
<?php
require_once 'vendor/autoload.php';

use Intervention\Image\ImageManagerStatic as Image;
?>

Create Image Instance

The first thing that you need to do when working with this library is to create an instance of the image from source. This is like saving a copy of the image into memory so that it can be easily manipulated. Any changes made to the image are only in memory until you choose to commit it to the filesystem.

1
2
3
<?php
$img = Image::make('images/a.jpg');
?>

Resizing Images

You can resize images by calling the resize method in the image instance that you’ve created. In the example below, the image is resized to exactly 50x50 pixels. It doesn’t matter if the image is distorted in the process. So if you have an image which is 300x600 (where 300 is the width and 600 is the height), the height will have to get squashed. This results in a sandwich-like image.

1
2
3
<?php
$img->resize(50, 50);
?>

If you don’t want that to happen, you need to utilize aspect ratio. This allows you to supply only either the width or the height. In the example below, the width is optional and the height is 50. This resizes the image to have a height of 50 and the width can have any value as long as the aspect ratio is the same.

1
2
3
4
5
<?php
$img->resize(null, 50, function ($constraint) {
    $constraint->aspectRatio();
});
?>

Adjusting Brightness, Contrast and Opacity

To adjust the brightness of an image, you can use values between 100 and -100. 100 being the brightess and -100 being the darkest. So you’ll only really see a white image if you supply 100 as the value and a black image if the value is -100. Positive values are used to bring the brightness up and negative to bring it down. In the example below, the brightness is adjusted to 25% of the default brightness of the image.

1
2
3
<?php
$img->brightness(25);
?>

To adjust the contrast, yup you guessed it right!, use the the contrast method. Just like the brightness method this accepts values between 100 and -100.

1
2
3
<?php
$img->contrast(25);
?>

To adjust the opacity, supply a value between 0 and 100 to the opacity method. With 100 being the full opacity and 0 being the full transparency. Note that adjusting the opacity of an image takes a bit of time. On my testing, it took a bit longer for it to finish than the other operations I’ve used so far.

1
2
3
<?php
$img->opacity(25);
?>

Cropping

Cropping images can be done by calling the crop method. This accepts 2 required arguments and 2 optional. The first and second arguments are the width and height of the area to be cropped. And the optional third and fourth arguments are the X and Y axis of the starting points of the crop area. If you do not supply those values, Intervention Image is going to assume that you want to crop at the very center of the image moving outward. That’s what the example below does.

1
2
3
<?php
$img->crop(100, 100);
?>

If you’re planning to implement a cropping functionality in your PHP application, Intervention Image can’t do it alone. It has to have a client-side component that allows the user to visually crop the image. For that there’s a jQuery plugin called cropper. I haven’t personally used it but the demo shows that the X and Y coordinates and the width and height can be determined using this library. So all you have to do is pass in those values to the server side and let Intervention Image do its thing.

Saving Images

Finally, you can commit the changes that you’ve made to the filesystem by using the save method. You don’t need to supply any arguments to it if you want to replace the original image. If you do not want that, then you can supply the path to the file where you want to save it. If you have a keen eye, you might have noticed that the original image was a .jpg image, and now its being saved as a .png image. Well that’s acceptable, Intervention Image automatically converts the image type for you. Lastly, the quality of the image can also be modified by passing in a second argument which has a value between 0 and 100. 100 being the same quality of the original image. In the example below, the quality is adjusted to 50% of the original one.

1
2
3
4
5
<?php
$img->save(); //replace the original image
$img->save('images/b.png'); //save to another file
$img->save('images/b.png', 50); //adjust quality of image
?>

Conclusion

That’s it! In this tutorial you’ve learned how to manipulate images in your PHP applications using the Intervention Image. As always, you have barely scratched the surface with this tutorial. There’s much more things that you can do with this library. I recommend you to check out the official website to learn more about it.

Comments