Installing Imagick on Ubuntu 11.10 and Using it to Dynamically Edit Images

Imagick is a PHP wrapper for the Image Magick library. It lets you use PHP to edit images on the fly. I'm working on a Pictures section of this website, and I found it useful to resize a images as users request them, without having to use GIMP to create a bunch of different sized images and then uploading them all. This install method uses PEAR and assumes you already have Apache and PHP up and running.

First, you need to install a few packages from the repositories:

sudo apt-get install php5-dev php-pear imagemagick libmagick9-dev

Now use PEAR to install Imagick:

sudo pecl install Imagick

It should tell you that the installation succeeded, and ask you to add a line to php.ini. The line does not need to go in php.ini though, it needs to go in the imagick.ini file instead. This shouldn't exist yet, so create the file:

/etc/php5/apache2/conf.d/imagick.ini

And just add the following line to it:

extension=imagick.so

Now you just need to restart Apache and everything should be ready to go for Imagick:

sudo /etc/init.d/apache2 restart
sudo /etc/init.d/apache2 reload

Now you should probably test it by getting a basic example running. In a directory hosted by Apache, create the following php file:

<?php
 
header('Content-type: image/jpeg');
 
// Config
$file = "myPic.jpg";
$x = 600;
$y = 450;

$image = new Imagick($file);
$image->adaptiveResizeImage($x,$y);

echo $image;
 
?>

This file will take the image $file and resize it to the size specified by $x and $y. Make sure you change $file to a real image.

But, how is this file used? Well let's say you named it magick.php and put it in your document root, you could open it up in a web browser (the hosted file in Apache, not the file itself, so localhost/magick.php). This would simply display the resized image in your web browser. You should probably check to see that this happens now to make sure everything is working. If you get an error like:

The image "http://localhost/magick.php" cannot be displayed because it contains errors.

Then double check your filepath to the image and your installation! If you get a lot of crazy characters, then perhaps you forgot the header telling the server that this is an image.

If you got it working that's great, but you might be wondering how this is useful... You dynamically edited an image and made a page out of it, but you can't really add any other html to this... The way that you actually use this image in a page is by referencing the PHP file you created just as if you were referencing an image. So you could create this index.html file:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>                                                                            
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>The Personal Blog of Justin McCandless</title>
</head>
<body>

<h1>Justin's Cool Picture</h1>
<p>Hey faithful readers, here is a picture from my latest adventure, automatically resized to fit this page even though it is a 10 megepixel beast on the server:</p>

<img src = "magick.php">

</body>
</html>

And when the page is called, the server would automatically resize your myPic.jpg file referenced in magick.php and display it like a normal img tag. You can see how this is really useful on a site with lots of different sized copies of pictures. You don't want to solve the problem of having a million image files on your site by having a million PHP files instead though, so here is a more useful and dynamic example of the magick.php file above for resizing:

<?php
header('Content-type: image/jpeg');

$file = $_REQUEST["file"];
$x = $_REQUEST["x"];
$y = $_REQUEST["y"];

$image = new Imagick($file);
$image->adaptiveResizeImage($x,$y);

echo $image;
?>

This version allows you to specify the file and the new size as URL paramaters, so you only need one magick.php file to handle any image. You could then use it like this:

<img src = "magick.php?file=myPic1.jpg&x=600&y=450">
<br><br>
<img src = "magick.php?file=myPic2.jpg&x=300&y=225">

And you've already got a ton of opportunities opened up by the awesomeness of Imagick. It does a lot more than resizing too, like adding watermarks, rotating, and even much more advanced image editing, all dynamically. You should be able to see it in action soon on the Pictures section of this site.

Lastly, if you're looking for more information and examples about Imagick, php.net is what I used to write this article and it's amazing as always.