网页截图生成图片文件保存本地(兼容火狐、IE10及以上版本浏览器)

使用到的项目：html2canvas  

github: https://github.com/niklasvh/html2canvas/

官网：http://html2canvas.hertzen.com/ 

思路过程或步骤：

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格式的图片(兼容火狐)








            

            
posted @ 
2019-04-24 16:24 
一坪海岸线 
阅读(770) 
评论(0) 
编辑 
收藏 
举报