Html網頁DIV截圖功能

需求及前提：

(1) 將web網頁展現的某些圖表，導出爲圖片保存；

(2) 圖表多是Canvas的（使用H5繪圖組件生成的或者本身Draw的），也多是div組合出來的；

 

方案1：

使用html2canvas(某些瀏覽器須要引入依賴es6-promise.min.js,由於木有Promise對象) 

https://github.com/niklasvh/html2canvas

https://github.com/stefanpenner/es6-promise

和 canvas2image

https://github.com/hongru/canvas2image/blob/master/canvas2image.js

示例：

 $("#snap_btn_001").on("click",function(event){
        event.preventDefault();

        var w = $("#id001").width();
        var h = $("#id001").height();

        
        //這一坨代碼是爲了解決截圖不清晰的問題，可是ratio應該根據瀏覽器的分辨率計算，這裏先寫死的一個數值
        var ratio = 2;
        //要將 canvas 的寬高設置成容器寬高的 Ratio 倍
        var canvas = document.createElement("canvas");
        canvas.id = "mycanvas";
        canvas.width = w * ratio;
        canvas.height = h * ratio;
        canvas.style.width = w + "px";
        canvas.style.height = h + "px";
        var context = canvas.getContext("2d");
        //而後將畫布縮放，將圖像放大ratio倍畫到畫布上
        context.scale(ratio,ratio);
        

        html2canvas(document.getElementById("id001"),{
            allowTaint: true,
            taintTest: false,
            width: w,
            height:h,
            onrendered: function(canvas) {
                var dataUrl = canvas.toDataURL();
                var newImg = document.createElement("img");
                //newImg.style = "display:none;";    //若是要導出，這兒能夠隱藏，而後用canvas2image搞定
                newImg.src =  dataUrl;
                document.body.appendChild(newImg);
            }
        });
    });

 

參考文章：

http://web.jobbole.com/86353/

http://blog.csdn.net/fengyao1995/article/details/51842486

 

方案2：

對於使用H5繪圖組件的，多數組件自己提供了導出爲圖片的方法，調用或者配置便可。

例如echarts js 的saveAsImgae配置。

 

方案1和2對比：

(1) 方案1 使用範圍廣，若是圖表包含了自定義的div，也能截圖導出，可是清晰度有問題（根源是啥，須要研究html2canvas源碼，我沒研究，可是我相信能夠解決。）

(2) 方案2，使用組件自身的導出，因爲自己就是canvas了，少了前一步的轉換，清晰度不錯，就是隻能導出組件自身的圖表。