html - How to save a rendered webpage as image with JavaScript?

Question

In my app I have to provide a 'save as image' button. I want to save the HTML rendered on my webpage as an image in JavaScript. It is a webapp and will be used in browsers of desktop/tablet/mobile phones. How to save rendered HTML as an image?

Answer 1

Check out html2canvas. A javascript framework that renders the page content on a canvas element. Saving the canvas as an image is as easy as:

var canvas = document.getElementById("mycanvas");
var img    = canvas.toDataURL("image/png");
document.write('<img src="'+img+'"/>');

source