Save the webpage as an image in Javascript

Step 1: Save the web page as a Canvas, with the help of html2canvas library, http://html2canvas.hertzen.com/

Html2canvas (document. getElementById ("id1"), {onrendered: function (canvas) {document. getElementById ("id2 "). appendChild (canvas); // how to deal with the canvas after it is generated. Of course, you can open it in a new label, display it on the floating layer, etc.}, canvas_id: 'canvas '// Add the canvas id by modifying the html2canvas source code });

Note: The first parameter of html2canvas () is the area of the canvas to be generated. If the canvas is generated for the entire webpage, It is document. body. For details about the second parameter, refer to the settings of canvas attributes on the official website. Of course, you can add attributes you want to modify the source code, such as adding IDs to canvas.

Step 2: Save the canvas generated in step 1 as an image

Var canvas = document. getElementById ("canvas"), url = canvas. toDataURL (); // the following code downloads the image function var triggerDownload = $ (""). attr ("href", url ). attr ("download", "img.png "). appendTo ("body"); triggerDownload [0]. click (); triggerDownload. remove ();

Here, we can focus on the toDataURL () method. We can convert the canvas to an image url in the form of data, and assign this url to the tag to display the image. Other parts of the Code are the download function we need.