Annotate An Image On Your Web Page

[Byron]

Ever wanted to annotate an image on your web site, maybe with random text or a countdown? With the Imagick Class it's really simple. Just copy and paste the code below into a php file and then add the php file inside an image tag:

 

<?php
# Define countdown, if your using a countdown
$day = 7;
$month = 7;
$year = 2012;
$days = (int)((mktime (0,0,0,$month,$day,$year) - 
time(void))/86400);
$days = $days+1;

# Your image goes here, relative path
$image = new Imagick("../images/seaside.jpg");
$draw = new ImagickDraw();

/*
The $x and $y attributes and the text that's displayed.
The $x and $y attributes are for moving the text from the left or top by pixels after setting the gravity.
*/
$x = 0; # pixels from the left
$y = 30; # pixels from the top
$text = "$days days til Vacation!";

# The font and font attributes
$draw->setFont("Times-Italic");
$draw->setFontSize(40);
$draw->setFillColor("white");
$draw->setStrokeColor("white");
$draw->setStrokeWidth(0.5);
$draw->setGravity(Imagick::GRAVITY_NORTH);
$image->annotateImage($draw, $x, $y, 0, $text);

/*
Other gravity settings
Imagick::GRAVITY_NORTHWEST
Imagick::GRAVITY_NORTH
Imagick::GRAVITY_NORTHEAST
Imagick::GRAVITY_WEST
Imagick::GRAVITY_CENTER
Imagick::GRAVITY_EAST
Imagick::GRAVITY_SOUTHWEST
Imagick::GRAVITY_SOUTH
Imagick::GRAVITY_SOUTHEAST
*/

# Make headers
header("Expires: Mon, 26 Jul 1997 05:00:00 GMT");
header("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT");
header("Cache-Control: no-store, no-cache, must-revalidate");
header("Cache-Control: post-check=0, pre-check=0", false);
header("Pragma: no-cache");
header("Content-type: image/jpeg");
echo $image;
?>

 

The finished image:

http://byrondallas.heliohost.org/php/countdown-imagick.php

 

Highlighted code:

http://byrondallas.heliohost.org/php/countdown-imagick.phps

 

Use an <img> tag to code it on your page:

<img src="http://byrondallas.heliohost.org/php/countdown-imagick.php" width="384" height="288" border="0">

 

Server fonts to choose from:

http://byrondallas.heliohost.org/php/tools...font-viewer.php

 

Of if you choose to use a True Type Font, you can replace this line with the relative path to your font:

$draw->setFont("fonts/my-font.ttf");

 

 

[Byron]

Here's an example of random text on an image.

 

http://byrondallas.heliohost.org/8_Ball.php

 

Uses the same script above but instead of a countdown script it uses an array of answers and randomly picks one.

 

 

 

[jje]

Cool script; thanks for sharing