How can I save multiple divs as an image?

Question

I'm trying to build an interface for the user, so he can choose or pick colored eyes, skin, etc., of a model. I'm really on my way with div s and CSS. I'm using Ajax for loading images into the div s.

My problem is that I need to offer a option to the user so he can save the image as a JPEG or PNG file.

Looking around, I found canvas HTML5 stuff on Stack Overflow, but it's not compatible with Internet Explorer,

• Create an Image of a DIV in JavaScript (GIF/PNG)
• How can I save div as image at client side where div contains one or more than one HTML5 canvas elements?

I need help to find something compatible with all browsers.

I also found this JavaScript code:

button = document.createElement("img");
button.src = "http://example.com/livechart.gif?interval=15"

But I don't know much about the createElement method.

I know CSS, but JavaScript is beyond my knowledge.

Answer 1

You cannot do this on the browser, you must do it on the server.

see: Convert web page to image

Answer 2

我相信您可以使用HTML canvas和一些JavaScript来做到这一点： Canvas2Image：将Canvas数据保存到图像文件 。

Answer 3

You want to take screenshot of the browser? Well, there are lot of ways you could try , but all of them would be browser-specific. The most reliable would be to just tell the user to make a screenshot with the OS. On a Mac it's Command-Shift-4, then space; on a PC, it it's ALT-PrtScr, I think.