Developer Oracles » image watermarking http://devoracles.com Sun, 21 Mar 2010 11:05:37 +0000 http://wordpress.org/?v=2.9.2 en hourly 1 Watermarking images using Imagick http://devoracles.com/watermarking-images-using-imagick/13 http://devoracles.com/watermarking-images-using-imagick/13#comments Sat, 12 Jul 2008 14:21:43 +0000 Gary Illyes http://devoracles.com/?p=13 This is a perfect day to show all how easy is to use php’s imagick library to watermark an image.
What you need is to have imagick installed and working correctly, a font you will use to write your website’s name on the image and of course an image you will put the text on.

I will explain each step but for those who don’t want to read, here’s the script:

<?php
$img	= 'path/to/your/image.jpg';
$text	= 'devoracles.com';
$font	= 'path/to/your/yourfont.ttf'
$font_size	= '20';
$watermark	= array();
$image = new Imagick($img);
$image->setImageFormat("jpg");
$draw = new ImagickDraw();
$draw->setGravity(Imagick::GRAVITY_CENTER);
$draw->setFont($font);
$draw->setFontSize($font_size);
$textColor = new ImagickPixel("black");
$draw->setFillColor($textColor);
$im = new imagick();
$properties = $im->queryFontMetrics($draw,$text);
$watermark['w'] = intval($properties["textWidth"] + 5);
$watermark['h'] = intval($properties["textHeight"] + 5);
$im->newImage($watermark['w'],$watermark['h'],new ImagickPixel("transparent"));
$im->setImageFormat("jpg");
$im->annotateImage($draw, 0, 0, 0, $text);
$watermark = $im->clone();
$watermark->setImageBackgroundColor($textColor);
$watermark->shadowImage(80, 2, 2, 2);
$watermark->compositeImage($im, Imagick::COMPOSITE_OVER, 0, 0);
$image->compositeImage($watermark, Imagick::COMPOSITE_OVER, 0, 0);
header("Content-Type: image/jpg");
echo $image;
?>

And the result is:

Watermark with Imagick

Watermark with Imagick


That was all, now a bit of explanation for almost all the lines. The first steps, as you see was to set up some variables which will be used in the script, I think the variable names talk for themselves so I don’t have to explain them. Do I?
Next, I instructed imagick to read the image which will be worked with and specified the type of the image, in the above case a “jpg”.

$image = new Imagick($img);
$image->setImageFormat("jpg");

By the way, if you want to write a script you will pass through all your images, thus all the images are watermarked, first assure that the image you work with is from your server, read, no one can use your script to watermark images on another server. The second thing, you can get the image’s extension using mime_content_type(‘path/to/your/image.jpg’). Not the best method I admit, but it’s simple and effective.
Let’s proceed further. I fired up a new class, ImagickDraw(), this will let Imagick know what font to use and also the text’s properties like font size, font color, etc. “Imagick::GRAVITY_CENTER” basically means to center the text on it’s, say, layer. You can play with it and try to set other parameters too, like “Imagick::GRAVITY_SOUTH” which means to place the text on the bottom of the layer, “Imagick::GRAVITY_WEST” to put it on the left side, you get the point.

$draw = new ImagickDraw();
$draw->setGravity(Imagick::GRAVITY_CENTER);
$draw->setFont($font);
$draw->setFontSize($f_size);
$textColor = new ImagickPixel("black");
$draw->setFillColor($textColor);

We get then the parameters of the text we want to put on the image and we add an additional 5 pixels to it, both horizontal and vertical axis. The 5 pixels will be needed later to have place for the drop-down shadow of the text. Then we simply create the canvas and with annotateImage() we put the text on the image.

$im = new imagick();
$properties = $im->queryFontMetrics($draw,$text);
$watermark['w'] = intval($properties["textWidth"] + 5);
$watermark['h'] = intval($properties["textHeight"] + 5);
$im->newImage($watermark['w'],$watermark['h'],new ImagickPixel("transparent"));
$im->setImageFormat("jpg");
$im->annotateImage($draw, 0, 0, 0, $text);

OK, now let’s play a bit with the shadow. First we clone the $im object, which is basically the text we’ll put on the image. The color of the image will be the same as the text’s. And now the interesting stuff: shadowImage(). This will create the drop-down shadow and the parameters tells Imagick how to create that shadow. The usage is:

shadowImage ( float $opacity , float $sigma , int $x , int $y )

So the first parameter sets how opaque the shadow has to be, the last two sets where to drop that shadow. Don’t ask me the second what does, i have no idea :D
OK, lastly let’s put our shadow on the image with compositeImage().

$watermark = $im->clone();
$watermark->setImageBackgroundColor($textColor);
$watermark->shadowImage(80, 2, 2, 2);
$watermark->compositeImage($im, Imagick::COMPOSITE_OVER, 0, 0);

The last steps are to put the watermark on the image, set the correct content-type header image/jpg in our case and echo the data. Why do we have to set the content-type header? Well, if I’m not mistaken, this is a php script and the browsers, if not overridden expects text/html, which in our case is not good at all.

$image->compositeImage($watermark, Imagick::COMPOSITE_OVER, 0, 0);
header("Content-Type: image/jpg");
echo $image;

That’s all. It was a bit complicated, but I’d rate its difficulty as ‘medium’ but it’s extremely useful in many cases. This is not JavaScript, so the watermark will be in place whatever the user does. If you are at least a bit familiar with object oriented PHP, I say give it a go and try it.

If something is not clear, the comments are open, just ask and will try to answer as soon as possible.

]]> http://devoracles.com/watermarking-images-using-imagick/13/feed 2