The first step is to save the web page as a Canvas canvas, with the help of the html2canvas library, http://html2canvas.hertzen.com/
html2canvas(document.getElementById("id1"), { onrendered: function(canvas) { document.getElementById("id2").appendChild(canvas);//How to deal with it after generating the canvas, of course you can open it in a new tab, display it in a floating layer, etc.}, canvas_id: 'canvas'//Add canvas' id by modifying the html2canvas source code });Note: The first parameter of html2canvas() is the area where canvas are to be generated. If the entire web page generates canvas, it is document.body. For details of the second parameter, please refer to the various properties of canvas on the official website. Of course, you can add the properties you want by modifying the source code, such as adding id to canvas.
The second step is to save the canvas generated in the first step into a picture
var canvas = document.getElementById("<span style="font-family: Arial, Helvetica, sans-serif;">canvas"</span><span style="font-family: Arial, Helvetica, sans-serif;">),</span> url = canvas.toDataURL();// //The following code is to download this image function var triggerDownload = $("<a>").attr("href", url).attr("download", "img.png").appendTo("body"); triggerDownload[0].click(); triggerDownload.remove();Here, just follow the toDataURL() method. You can convert canvas into a data-form image url. Assign this url to the <img/> tag to display the picture. Other parts in the code are the download functions you need.