html2canvas.js功能所出现的问题以及解决办法

原创 starcyh 随笔 js效果 88阅读 29 天前 举报

之前碰到过一个需求,在移动端的页面中,有一个“我的证书”按钮,点击之后,弹窗一个弹窗,里面是调取的数据,在这个需求中遇到的坑有以下几点:
1、在弹出层里面如果调用图片,会因为跨域问题不显示调取的图片;
2、调取数据时会有空白出现;
3、长按按钮不会保存图片,必须想办法长按按钮保存图片
那么,我们开始了,首先下载html2canvas.js <地址:https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.js > 下载之后,要修改一下里面的代码,不然无法解决跨域问题,下载后,找到js中的useCORS: false,然后修改成useCORS: true, 这样就能解决图片跨域问题;
我们先看一下弹出层的代码:

然后在页面中引用jquery文件,再引用js文件,再插入代码:

在这段js代码中 “#cavt” 是指要截取的div的id,“.d_cdv”这个样式指的是截取的图片放到什么位置,那么接下来,我们要解决调取数据出现空白的情况了,这种情况,无非就是js已经截完图了,而数据还没调取出来,那么,我们给截图加一个延迟,那么就解决问题了,如下:

那么现在就剩下最后一个问题了,如何点击按钮保存图片呢,我想了一个办法,就是截取的图比按钮的层级更高一级,然后截取的图片opacity:0,这样的话,使用手机自带的长按保存图片功能就没啥问题了,这是自己想的,也许还会有更好的办法,目前还没想到。最后,上所有代码,<弹窗出现,就会截完图哦,可以查看元素“d_cdv”样式里面看到截取的图片> ,可下载下来再本地试运行:

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复