安卓7.0版本及以上 html2canvas 无法获取内部canvas内容

最新推荐文章于 2025-05-21 11:34:00 发布

转载

最新推荐文章于 2025-05-21 11:34:00 发布 · 2.2k 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://juejin.im/post/5cd3015a6fb9a0321a151489

文章标签：

#移动开发

在安卓7.0及更高版本中，使用html2canvas生成图片时，内部canvas元素的内容无法正常获取，导致生成的图片缺少二维码。通过对代码的调整和测试，找到了一种解决方法，成功解决了这个问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在项目中遇到的问题，活动页生成二维码，然后使用 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(