解决qrcode生成的二维码微信长按不识别问题

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

邪人君子

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

阅读量1w

点赞数 2

分类专栏：采坑之路文章标签： qrcode canvas 微信二维码识别长按识别

本文链接：https://blog.csdn.net/qq_27127385/article/details/105665406

版权

采坑之路专栏收录该内容

30 篇文章

订阅专栏

本文主要解决了使用QRcode生成的二维码在微信中长按无法识别的问题。问题源于部分安卓设备上元素未正确隐藏，导致长按时识别的是非图片内容。通过手动隐藏并转换为图片，成功实现微信长按识别二维码的功能。

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

问题描述

QRcode 生成二维码，展示到页面，微信打开，长按二维码没反应。而直接放二维码图片上去可以识别。

问题原因

手机兼容问题
qrcode在页面生成二维码时，会生成一个canvas标签和一个img标签。
在电脑浏览器上调试的时候，发现生成二维码之后canvas标签是会自动隐藏的，然后展示img标签，我们看到和识别的其实是图片。
在这里插入图片描述
本来那个canvas应该是隐藏的，不过部分安卓机里面，canvas元素没有隐藏掉，所以长按的时候按的不是图片，所以无法识别，也就没有弹窗，转成图片放到页面上去就行。

解决办法

手动将canvas隐藏，获取生成的链接拼到图片里面。
html页面：

<div id="QRCode" style="display: none;"></div>
<!-- 上面这个用来生成二维码，隐藏掉，下面这个放置转换后的图片 -->
<div id="myQRCode"></div>

JavaScript 文件：

var hideQRCode = document.getElementById("QRCode"),
    myQRCode = document.getElementById("myQRCode"),
    image = new Image();

var qrcode = new QRCode(hideQRCode, {
    width : 108,
    height : 108
});

qrcode.makeCode('http://aaaaa');

// 获取canvas元素转成 img 
image.src = hideQRCode.firstChild.toDataURL("image/png");    

myQRCode.appendChild(image); // 放到页面