DIV轉成圖片並匯出html2canvas.js
阿新 • • 發佈:2019-02-12
小猿目前接到一個需求就是把一個頁面轉成圖片並匯出
上網查到各種工具所採用的就是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' });
小猿的工作經驗不是很豐富,大家見諒 ,下面直接上效果圖