Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to save a rendered webpage as image with JavaScript?

Tags:

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?

like image 249
Bhavika Avatar asked Aug 19 '13 11:08

Bhavika


People also ask

How can I save a web page as an image?

Press Ctrl + L to highlight the URL, and then Ctrl + C to copy it to the clipboard. Press Ctrl + V to paste the URL into either of the services to save the file as a picture or a PDF.

How do I save HTML code as an image?

Open your HTML file in your browser or any viewable tool. Take a snapshot of an area with your screen capture tool (Snipping tool on Windows, for example). Click File > Save as. Select the location and select the Save as type as JPG.

Can JavaScript display images?

JavaScript is known as the web development language. By using JavaScript, we can make our web page attractive by inserting images into it. By default, we use the <img> tag in HTML to display images. In the <img> tag, we have a method known as src , which helps get the source of the image that we gave to display.


1 Answers

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

like image 198
Tim Bartsch Avatar answered Oct 31 '22 11:10

Tim Bartsch