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趋
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值