網頁截圖生成圖檔檔案儲存本地(相容火狐、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格式的圖檔(相容火狐)

網頁截圖生成圖檔檔案儲存本地(相容火狐、IE10及以上版本浏覽器)

html5 實作網頁截屏 頁面生成圖檔(圖文)

純前端實作base64圖檔下載下傳，相容IE10+

原生JS實作base64圖檔下載下傳-圖檔儲存到本地

前端實作圖檔下載下傳

js下載下傳base64格式的圖檔(相容火狐)

html5 實作網頁截屏頁面生成圖檔(圖文)