在项目中遇到的问题,活动页生成二维码,然后使用 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及以上版本有这个问题,暂时未知。