使用到的项目：html2canvas
思路过程或步骤：
1、将网页生成Base64图片数据；
2、将Base64图片数据生成Blob数据对象；
3、使用a标签的download属性对图片进行下载；
4、解决一些浏览器兼容问题。
第一步：生成Base64图片数据，需要引用html2canvas.js
html2canvas(document.body, { allowTaint: true, taintTest: false, onrendered: function (canvas) { canvas.id = "mycanvas"; //生成base64图片数据 var base = canvas.toDataURL("image/png"); var dataUrl = canvas.toDataURL(); downloadFile(dataUrl, "orderinfo.png"); } });
第二步：生成Blob数据对象
var base64ToBlob = function (code) { var parts = code.split(';base64,'); var contentType = parts[0].split(':')[1]; var raw = window.atob(parts[1]); var rawLength = raw.length; var uInt8Array = new Uint8Array(rawLength); for (var i = 0; i < rawLength; ++i) { uInt8Array[i] = raw.charCodeAt(i); } return new Blob([uInt8Array], {type: contentType}); };
第三步：使用a标签的download属性下载图片
function downloadFile(content,fileName){ var aLink=document.createElement('a'); var evt=document.createEvent("HTMLEvents"); evt.initEvent("click",true,true); aLink.download=fileName; aLink.href=URL.createObjectURL(blob); aLink.click(); }
第四步：解决一些浏览器兼容问题
IE浏览器下，只支持IE10及以上：if(window.navigator.msSaveOrOpenBlob){ var bstr=atob(content.split(',')[1]); var n = bstr.length; var u8arr = new Uint8Array(n); while (n--) { u8arr[n] = bstr.charCodeAt(n) } var blob = new Blob([u8arr]); window.navigator.msSaveOrOpenBlob(blob, 'xxx' + '.' + 'png') }火狐浏览器，我的版本是66，看网上的博客是61以上，没有测试过：
var aLink=document.createElement('a'); var evt=document.createEvent("HTMLEvents"); evt.initEvent("click",true,true); aLink.download=fileName; aLink.href=URL.createObjectURL(blob); // aLink.click(); aLink.dispatchEvent(new MouseEvent('click', {bubbles: true, cancelable: true, view: window}));还有其他的浏览器类型没有测试过。
完整代码：
<!DOCTYPE html> <html> <head> <meta name="layout" content="main"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> <script type="text/javascript" src="html2canvas.js"></script> <script type="text/javascript" > $(document).ready( function(){ $(".example1").on("click", function(event) { event.preventDefault(); html2canvas(document.body, { allowTaint: true, taintTest: false, onrendered: function(canvas) { canvas.id = "mycanvas"; //生成base64图片数据 var base= canvas.toDataURL("image/png"); var dataUrl = canvas.toDataURL(); var newImg = document.createElement("img"); newImg.src = dataUrl; downloadFile(dataUrl,"xxx.png"); $("#createimage").attr("src",dataUrl); } }); }); }); function downloadFile(content,fileName){ var base64ToBlob=function(code){ if(navigator.appName == "Microsoft Internet Explorer"&&parseInt(navigator.appVersion.split(";")[1].replace(/[ ]/g, "").replace("MSIE",""))<=9){ alert("您的浏览器版本过低，请下载IE10及以上版本"); }else{ var parts=code.split(';base64,'); var contentType=parts[0].split(':')[1]; var raw=window.atob(parts[1]); var rawLength=raw.length; var uInt8Array=new Uint8Array(rawLength); for(var i=0;i<rawLength;++i){ uInt8Array[i]=raw.charCodeAt(i); } return new Blob([uInt8Array],{type:contentType}); } }; var blob=base64ToBlob(content); if(window.navigator.msSaveOrOpenBlob){ var bstr=atob(content.split(',')[1]); var n = bstr.length; var u8arr = new Uint8Array(n); while (n--) { u8arr[n] = bstr.charCodeAt(n) } var blob = new Blob([u8arr]); window.navigator.msSaveOrOpenBlob(blob, 'xxx' + '.' + 'png') }else{ var aLink=document.createElement('a'); var evt=document.createEvent("HTMLEvents"); evt.initEvent("click",true,true); aLink.download=fileName; aLink.href=URL.createObjectURL(blob); // aLink.click(); //兼容火狐浏览器 aLink.dispatchEvent(new MouseEvent('click', {bubbles: true, cancelable: true, view: window})); } }; </script> </head> <body> Hello! <div class="" style="background-color: #abc;"> html5页面截图 </div> <textArea id="textArea" col="20" rows="10" ></textArea> <input class="example1" type="button" value="截图"> 生成界面如下： <img src="" id="createimage"/> </body> </html>
小结：有什么遗漏、错误请留言。
参考博客链接：html5 实现网页截屏 页面生成图片(图文)
纯前端实现base64图片下载，兼容IE10+
原生JS实现base64图片下载-图片保存到本地
前端实现图片下载
js下载base64格式的图片(兼容火狐)