Javascript - Visual Representation of Element as an Image

Question

This is a long shot but I've seen things which might make it posssible.

I have a div, which is filled with images. Album covers if you must know. And I want to allow users to download this as an image. So they could use it as something like a desktop background.

So is this possible? Get this visual representation of an element and display it as an image?

Answer 1

Basically you can't do that. At least crossbrowser. But if it is not critical. You can try <canvas>

check here http://www.nihilogic.dk/labs/canvas2image/

Answer 2

Assuming I understand the question...If you know the position of the images in the div, you could concatenate the images together server side into a single image. Then just have a button users can click on that will call the function to assemble and download this image.

Answer 3

From what I understood from your question you can use an

img

tag for this. The user can view the image in the browser and can save it to their hard drive.

from your description each of the image inside will be a different album cover, so combining these into a single image won't a good idea.

Answer 4

You could possibly do the rendering serverside. By this I mean that you could generate the HTML and kind of "screenshot" it on the server. The result would nearly always be at least slightly different from what the user sees, but depending on your requirements it might be enough.

There are various tools to do this, for example wkhtmltoimage, which is a sister project of wkhtmltopdf and can be found at https://code.google.com/p/wkhtmltopdf/