DIV轉成圖片並導出html2canvas.js

小猿目前接到一個需求就是把一個頁面轉成圖片並導出

上網查到各種工具所採用的就是html2canvas.js （裏面代碼沒細看）

這個工具相當不錯，我們可以將某一個DIV或者BODY轉成圖片並且下載。

我們將DIV轉成圖片並且用64進制轉換，再寫一個方法去下載該圖片

在做的過程中遇到 IE 不兼容 promise  這個時候我們用到工具 

bluebird.min.js 將其引入之後就沒問題了

 

資源 html2canvas.js and html2canvas.svg.js and bluebird.min.js

 

下載地址：http://download.csdn.net/download/qq_37511501/10232976 資源

 

html2canvas 使用 API：https://www.jianshu.com/p/6a07e974a7e8

 

該資源有demo 親測瀏覽器 谷歌和IE 其它沒測

 

下面是使用方法，圖片的寬高也可以自定義 

// DIV id imgEchartsAndTable 是div ID
html2canvas($("#imgEchartsAndTable"), {
    onrendered: function(canvas) {
        canvas.id = "mycanvas";
        var img = convertCanvasToImage(canvas);
        //調用下載方法 封裝的下載方法，都在資源裏面
        if(browserIsIe()){  //假如是ie瀏覽器 
            DownLoadReportIMG('MTTR趨勢圖.jpg',img.src);
        }else{
            download(img.src)  //下載圖片
        }
    },
    background:'white'
});

小猿的工作經驗不是很豐富，大家見諒 ，下面直接上效果圖