使用qrcode生成的二维码安卓手机长按不识别问题

最新推荐文章于 2025-02-27 10:07:56 发布

scarecrowll

最新推荐文章于 2025-02-27 10:07:56 发布

阅读量2.3k

点赞数

文章标签： html5 python html

本文链接：https://blog.csdn.net/qq_41227106/article/details/120084254

版权

本文介绍了在使用qrcodejs2库生成二维码时遇到的安卓设备兼容性问题。在某些安卓手机如华为上，二维码由canvas显示而非img，导致无法长按识别。解决方案是手动隐藏canvas，将生成的二维码图片放入img标签中，确保所有设备都能正确识别。

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

1、下载依赖

npm install qrcodejs2 --save

2页面引用

import QRCode from "qrcodejs2";

3、生成二维码

3.1节点

        <div id="qrcode"></div>

3.2 生成code

 mounted(){

 this.$nextTick(() => {
        var qrcode = new QRCode(document.getElementById("qrcode"), {
          width: 100,
          height: 100,
          text: this.link, // 二维码地址
          colorDark: "#000",
          colorLight: "#fff",
        });
    })
 }

用$nextTick（）方法，主要是防止节点还没创建好就调用，主要解释如下：

https://mp.csdn.net/mp_blog/creation/editor/120057569

接下来查看，你会发现这个二维码在安卓机并不能长按识别

#问题原因
浏览器兼容问题
qrcode在页面生成二维码时，会生成一个canvas标签和一个img标签。在电脑浏览器上调试的时候，发现生成二维码之后canvas标签是会自动隐藏的，然后展示img标签，我们看到和识别的其实是图片。但是在华为手机上生成的canvas是不会隐藏的，我们看到的是canvas，所以无法识别，截图却可以。

#解决办法
手动将canvas隐藏，获取生成的链接拼到图片里面。

节点

<div id="QRCodeNone"></div>
<div id="qrcode"></div>

生成

mounted (){
    this.$nextTick(() => {
     var qrcode = new QRCode(document.getElementById("QRCodeNone"), {
     width: 100,
     height: 100,
     text: this.link, // 二维码地址
     colorDark: "#000",
     colorLight: "#fff",
     });
    //在小米或者华为手机上生成的二维码是通过canvas展示的，img标签被隐藏,所以需要特殊处理一下，将 
     canvas标签隐藏，拿到生成的url放到img里面再展示出来
     let myCanvas = document.getElementsByTagName("canvas")[0];
     let img = this.convertCanvasToImage(myCanvas);
     let code = document.getElementById("qrcode");
     code.appendChild(img);
   })
},
convertCanvasToImage(canvas) {
      var image = new Image();
      image.src = canvas.toDataURL("image/png");
      return image;
},