DIV转成图片并导出html2canvas.js
程序员文章站
2024-02-16 23:32:04
...
小猿目前接到一个需求就是把一个页面转成图片并导出
上网查到各种工具所采用的就是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'
});
小猿的工作经验不是很丰富,大家见谅 ,下面直接上效果图
下一篇: 字体图标