Writing a jQuery div to an image file

I have a jQuery div where pictures are dragged into position similar to this site (players are dragged onto a pitch to make a team), but how is the result written to an image file? I presume it uses some sort of image library like imagemagick but I don开发者_运维技巧't understand how it's done. I'm using rails if that makes a difference, though any replies would be helpful.

With GD2 you can specify the coordinates in wich you want an image positioned on top of another, as well as inserting text and then generate a picture, but the process is not associated with the javascript that you use to build the prototype, you must gather the coordinate data from the javascript frontend and recreate the result with PHP or Ruby and GD2. I'm not familiar with ImageMagick but I think it's probably similar to GD2.

http://php.net/manual/en/book.image.php

Alternatively, you can use the HTML CANVAS object instead of just DIVs, and generate a PNG file just in the browser.

Capture HTML Canvas as gif/jpg/png/pdf?

In that case, there's a top div that contains the background image and to where names can be dragged (see the drag and drop api).

Once you have the field ready, you can obtain a list of each image that should be put on the field. Upload their coordinates to the server and generate an image file from this info.

You can use imagemagick compose methods to compose an image from sub-images. See ATop: http://www.imagemagick.org/Usage/compose/#atop