save image after some data written on that image

Hi all i am displaying an image in a div and content in another div.using jquery draggable method, i placed the content in that div on the image. Now i want to save that image w开发者_StackOverflow中文版ith content as an image. Is it possible? please answer this as it is important

It's perfectly possible to do this, but it's not trivial and I won't post all the code necessary to do it. Instead, I'll give you some pointers:

• You can't save the added text "as is" client-side. That's not possible. You could take a screenshot of it, but that's probably not what you want.
• Instead, you need to save the text value and the position and size of where the text is placed relative to the image.
  • Use relative values, e.g. x = 0.3242, y = 0.5123, width = 0.5123, height = 0.12, where x = 0, y = 0 is the top left corner of the image and x = 1, y = 1 the bottom right corner, width and height similarily representing a fraction of the image size.
• POST this information to the server and recreate the same effect by baking the text into the image using, for example, gd.
• For finding the right font size to use, futz around with imagettfbbox until you have found the closest equivalent in size to the target coordinates.
• Use imagettftext for writing the text into the image.