網頁截圖生成圖片文件保存本地(兼容火狐、IE10及以上版本瀏覽器)

時間 2019-11-12

標籤網頁截圖生成圖片文件保存本地兼容火狐 ie10 以上版本瀏覽器欄目 HTML 简体版

原文原文鏈接

使用到的項目：html2canvas javascript

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

官網：http://html2canvas.hertzen.com/ 前端

思路過程或步驟：html5

一、將網頁生成Base64圖片數據；java

二、將Base64圖片數據生成Blob數據對象；jquery

三、使用a標籤的download屬性對圖片進行下載；git

四、解決一些瀏覽器兼容問題。github

第一步：生成Base64圖片數據，須要引用html2canvas.jsweb

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以上，沒有測試過：canvas

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 實現網頁截屏頁面生成圖片(圖文)