PHP or Javascript or other - Draw simple shapes onto images?

Question

I basically have an image of a world map and i would like to place a pin image at a specified pixel co-ordinate ontop of this world map image.

It's for a website, so ideally the solution should be in PHP or Javascript (i'm avoiding Java and Flash as i want it to be as simple as possible).

I had a look at the processing.js library but it is way to big and bloated for just performing this simple task. Is there a pre-existing Javascript function which will allow me to do this? Or a more simple javascript library that i can use? (processing.js was a bit too advanced for me, i couldnt get it working lol)

In terms of a PHP solution, i would prefer taking the load off the server and onto the client for this task, but i would still like to hear methods for doing it in PHP if they are suitable.

Thanks!

Answer 1

I suggest using the GD Library Extension for PHP. From this you can manipulate images and produce a new output. Then you can either cache it somewhere and redirect the user, or serve the image by tweaking the output headers and writing the binary data out to stdout.

header("Content-Type: image/jpeg");

Answer 2

As Aren mentioned, GD is good for this.

However, an alternative to the GD Library is Imagemagick. This gentle introduction is very helpful.

ImageMagick® is a software suite to create, edit, and compose bitmap images. It can read, convert and write images in a variety of formats (over 100) including DPX, EXR, GIF, JPEG, JPEG-2000, PDF, PhotoCD, PNG, Postscript, SVG, and TIFF. Use ImageMagick to translate, flip, mirror, rotate, scale, shear and transform images, adjust image colors, apply various special effects, or draw text, lines, polygons, ellipses and Bézier curves.

Answer 3

Do you really have to have that 'pin image' in the image itself? Simple HTML & CSS (absolute positioning) would solve this very nicely with practically no load for everyone involved, with the only downside the image is not saveable with the overlaying image included.

Answer 4

the easiest way to do this is to put pin image over map image and set them position in css like this:

<div style="position:relative">
  <img src="map.png" style="position:absolute; top:0px; left:0px; z-index:0"/>
  <img src="pin.png" style="position:absolute; top:50px; left:30px; z-index:1"/>
</div>