DIV转成图片并导出html2canvas.js

╰+攻爆jí腚メ 2022-06-01 14:05 433阅读 0赞

小猿目前接到一个需求就是把一个页面转成图片并导出

上网查到各种工具所采用的就是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 其它没测

下面是使用方法,图片的宽高也可以自定义

  1. // DIV id imgEchartsAndTable 是div ID
  2. html2canvas($("#imgEchartsAndTable"), {
  3. onrendered: function(canvas) {
  4. canvas.id = "mycanvas";
  5. var img = convertCanvasToImage(canvas);
  6. //调用下载方法 封装的下载方法,都在资源里面
  7. if(browserIsIe()){ //假如是ie浏览器
  8. DownLoadReportIMG('MTTR趋势图.jpg',img.src);
  9. }else{
  10. download(img.src) //下载图片
  11. }
  12. },
  13. background:'white'
  14. });

小猿的工作经验不是很丰富,大家见谅 ,下面直接上效果图

了

发表评论

表情:
评论列表 (有 0 条评论,433人围观)

还没有评论,来说两句吧...

相关阅读