如何把网页截图保持为本地图片？

今天分享下”如何把网页截图保持为本地图片？“这篇文章，文中根据实例编码详细介绍，或许对大家的编程之路有着一定的参考空间与使用价值，需要的朋友接下来跟着云南仟龙Mark一起学习一下吧。 具体代码如下所示：

​​​​

​​<​​​​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​​ ​​src​​​​=​​​​"https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.min.js"​​​​></​​​​script​​​​>​​

​​<​​​​script​​ ​​type​​​​=​​​​"text/javascript"​​​​>​​

​​var oDiv = document.getElementById(‘oDiv’);​​

​​// body截图​​

​​// 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);​​

​​});​​

​​//判断浏览器类型​​

​​function myBrowser() {​​

​​var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串​​

​​var isOpera = userAgent.indexOf(“Opera”) > -1;​​

​​if(isOpera) {​​

​​return "Opera"​​

​​}; //判断是否Opera浏览器​​

​​if(userAgent.indexOf(“Firefox”) > -1) {​​

​​return “FF”;​​

​​} //判断是否Firefox浏览器​​

​​if(userAgent.indexOf(“Chrome”) > -1) {​​

​​return “Chrome”;​​

​​}​​

​​if(userAgent.indexOf(“Safari”) > -1) {​​

​​return “Safari= ​​http://www.qlyl1688.com/​​”;​​

​​} //判断是否Safari浏览器​​

​​if(userAgent.indexOf(“compatible”) > -1 && userAgent.indexOf(“MSIE”) > -1 && !isOpera) {​​

​​return “IE”;​​

​​}; //判断是否IE浏览器​​

​​if(userAgent.indexOf(“Trident”) > -1) {​​

​​return “Edge”;​​

​​} //判断是否Edge浏览器​​

​​}​​

​​//IE浏览器图片保存本地​​

​​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未实现​​

​​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​​​​>​​

以上是云南仟龙Mark给大家介绍的所有内容,希望对大家有所帮助，如果大家有任何疑问请在脚本之家留言，如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！