具體程式碼如下所示：
<!DOCTYPE html><html> <head> <meta charset=UTF-8> <title>html2canvas_download</title> <style> a { 遊標：指標；顏色：rgb(85,26,139)；文字裝飾：底線； } </style> </head> <body> <div id=oDiv style=width: 300px;高度：300px；邊距：10 像素；背景：紅色；邊框：5px純灰;> <h1>你好世界！ </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截圖 // 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(); downLoadRIFn); } }); //判斷瀏覽器類型 function myBrowser() { var userAgent = navigator.userAgent; //取得瀏覽器的userAgent字串 var isOpera = userAgent.indexOf(Opera) > -1; if(isOpera) { 返回 Opera }; //判斷是否Opera瀏覽器 if(userAgent.indexOf(Firefox) > -1) { return FF; } //判斷是否為Firefox瀏覽器 if(userAgent.indexOf(Chrome) > -1) { return Chrome; } if(userAgent.indexOf(Safari) > -1) { return Safari; } //判斷是否Safari瀏覽器 if(userAgent.indexOf(相容) > -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 != 完成;) { if(oPop.document.readyState == 完成) 中斷; 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(連結); }; function downLoadFn(url) { if(myBrowser() === IE || myBrowser() === Edge) { SaveAs5(url); } } else { 下載(url); } } </腳本> </正文> </ html>總結以上就是小編給大家介紹的使用HTML截圖並保存為本地圖片的實現代碼，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。對VeVb武林網網站的支援！