博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
安卓7.0版本及以上 html2canvas 无法获取内部canvas内容
阅读量:6002 次
发布时间:2019-06-20

本文共 1117 字,大约阅读时间需要 3 分钟。

在项目中遇到的问题,活动页生成二维码,然后使用 html2canvas 连同背景div一起生成图片,保存到手机本地。 结果安卓部分机型,保存的图片,只有背景,没有通过qrcanvas生成的二维码。 经过初步测试发现,主要是安卓7.0及以上版本会存在这个问题。

初步对问题的猜测是安卓7.0及以上版本,html2canvas 无法获取内部canvas元素的内容。

原来有问题的代码:

created() {    let that = this;    that.$nextTick(function () {        var canvas1 = qrcanvas({            data: decodeURIComponent(that.$route.query.url), //分享链接(根据需求来)            size:128 //二维码大小        });        document.getElementById("qrcode").innerHTML = '';        document.getElementById('qrcode').appendChild(canvas1);    })}复制代码

发现希望生成的活动分享图片,其img包裹的背景图片不存在使用html2canvas无法获取的问题,所以

解决方法如下:

created() {    let that = this;    that.$nextTick(function () {        var canvas1 = qrcanvas({            data: decodeURIComponent(that.$route.query.url), //分享链接(根据需求来)            size:128 //二维码大小        });        const tempImg = document.createElement('img');        tempImg.src = canvas1.toDataURL();        document.getElementById("qrcode").innerHTML = '';        document.getElementById('qrcode').appendChild(tempImg);    })}复制代码

经测试可以解决现有问题。至于为什么安卓7.0及以上版本有这个问题,暂时未知。

转载于:https://juejin.im/post/5cd3015a6fb9a0321a151489

你可能感兴趣的文章
mac的git的21个客户端
查看>>
Django之form表单实例
查看>>
Spring Cloud自定义引导属性源
查看>>
OSChina 周日乱弹 ——程序员怎么攒钱买房子!(励志、温情)
查看>>
mysql树状数据的数据库设计
查看>>
JavaScript快速入门
查看>>
Intger 自动装拆箱
查看>>
html中a连接触发表单提交
查看>>
Linux网卡名改eth0方法
查看>>
SQL or NoSQL——云计算环境中该选择谁
查看>>
托盘气泡很长时间才能消失,uTimeout没起到作用的解决办法
查看>>
利用webshell搭建socks代理
查看>>
nginx+keepalived构建主主负载均衡代理服务器
查看>>
LED灯的闪烁与熄灭也成了一个iptables target,强汗
查看>>
UVA 1169\uvalive 3983 Robotruck 单调队列优化DP
查看>>
我的友情链接
查看>>
POJ 1703 Find them, Catch them
查看>>
[共通]手机端网页开发问题及解决方法整理
查看>>
HSRP 原理
查看>>
监控队列的脚本
查看>>