The specific code is as follows: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>html2canvas_download</title> <style> a { cursor: pointer; color: rgb(85, 26, 139); text-decoration: underline; } </style> </head> <body> <div id="oDiv" style="width: 300px; height: 300px; margin: 10px; background: red; border: 5px solid gray;"> <h1>hello world!</h1> </div> <!-- <script type="text/javascript" src="../dist/html2canvas.js"></script> --> <script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.min.js"></script> <script type="text/javascript"> var oDiv = document.getElementById('oDiv'); //body screenshot//html2canvas(document.body).then(function(canvas) { // document.body.appendChild(canvas); // }); html2canvas(oDiv).then(function(canvas) { document.body.appendChild(canvas); var oCavans = document.getElementsByTagName('canvas')[0]; var strDataURI = oCavans.toDataURL(); downLoadFn(strDataURI); }); //Determine the browser type function myBrowser() { var userAgent = navigator.userAgent; //Get the browser's userAgent string var isOpera = userAgent.indexOf("Opera") > -1; if(isOpera) { return "Opera" }; //Judge whether it is Opera browser if(userAgent.indexOf("Firefox") > -1) { return "FF"; } //Judge whether it is Firefox browser if(userAgent.indexOf("Chrome") > -1) { return "Chrome"; } if (userAgent.indexOf("Safari") > -1) { return "Safari"; } // Determine whether it is Safari browser if (userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1 && !isOpera) { return "IE"; }; //Judge whether it is IE browser if(userAgent.indexOf("Trident") > -1) { return "Edge"; } //Determine whether it is Edge browser} //IE browser saves the picture locally function SaveAs5(imgURL) { var oPop = window.open(imgURL, "", "width=1, height=1, top=5000, left=5000"); for(; oPop.document.readyState != "complete";) { if(oPop.document.readyState == "complete") break; } oPop.document.execCommand("SaveAs"); oPop.close(); } // chrome14+,firefox20+,pera15+,Edge 13+,Safari do not implement function download(strDataURI) { var link = document.createElement('a'); link.innerHTML = 'download_canvas_image'; link.download = 'mypainting.png'; link.addEventListener('click', function(ev) { link.href = strDataURI; }, false); document.body.appendChild(link); }; function downLoadFn(url) { if(myBrowser() === "IE" || myBrowser() === "Edge") { SaveAs5(url); } else { download(url); } } </script> </body> </html> Summarize The above is the implementation code that I introduced to you for using HTML screenshots and saving them as local images. I hope it will be helpful to you. If you have any questions, please leave me a message and I will reply to you in time. I would also like to thank everyone for their support of the 123WORDPRESS.COM website! |
<<: Install MySQL5.5 database in CentOS7 environment
>>: Sample code of uniapp vue and nvue carousel components
Mainly use the preserve-3d and perspective proper...
Organize the MySQL 5.5 installation and configura...
Table of contents The effect of mixed inheritance...
1. Problem description Due to some reasons, the d...
Recently, when I was using the Linux operating sy...
This article example shares the specific code of ...
I believe everyone is familiar with the trashcan,...
In MySQL, databases correspond to directories wit...
Preface In order to follow the conventional WEB l...
Introduction to Positioning in CSS position attri...
Based on SEO and security considerations, a 301 r...
Download and install JDK Step 1: First download t...
Table of contents Oracle Isolation Levels MySQL I...
Table of contents 1. Scenario 2. Solution 3. Conc...
Official website address: https://www.mysql.com/ ...