微信中 qrcode 生成二维码长按无效果的解决方案

引言

我们先来看这样一段代码

 <div
   id="qrcode"
   ref="qrcode"
   class="bind-code-img"
   style="
   height: 180px;
   width: 180px;
   margin-top: 22px;
   display: none;
"></div>

 new QRCode("qrcode", {
          width: 210,
          height: 210,
          text: this.qrcodeurl,
          correctLevel: QRCode.CorrectLevel.L,
          colorLight: "#ffffff",
          colorDark: "#000000",
 });

在项目开发中，我们使用 qrcode 插件将 url 转换成二维码，代码逻辑在常规浏览器环境下运行良好，能正常生成可视化的二维码图片。然而，当部署到微信浏览器中时，却出现了一个棘手的问题：用户长按二维码图片，无法正常吊起微信的扫描弹窗，导致二维码扫码功能失效。这一问题严重影响了用户通过扫码跳转链接的操作流程，比如无法实现扫码关注公众号、跳转活动页面等功能。

问题排查 

我们首先来看一下微信是如何识别页面中的图片并且调起弹窗的

• 检测长按操作：微信客户端会监测页面中的 img 标签，当用户在 img 标签内进行长按操作时，客户端会捕捉到这个动作。
• 执行截屏操作：客户端确认用户长按 img 标签后，会进行截屏。这里的截屏并非是对手机屏幕的真实截图，而是基于 DOM（文档对象模型），根据页面上可用的信息构建出一个类似屏幕截图的图像数据。这样做的好处是可以避免网络传输等因素的影响，更快地获取到用于识别的图片数据，提升用户体验。
• 启动识别算法：截屏完成后，微信会启动图片识别算法对截屏图像进行分析。对于二维码图片，微信有专门的二维码识别算法，能够快速准确地识别出二维码中的信息，并执行相应的操作，如打开链接、显示相关信息等。对于普通图片，微信可能会根据图像的特征、内容等进行分析，以提供相应的操作选项，如保存图片、发送给朋友等。

那么问题找到了，是不是因为我们QRcode生成出来的图片并不是img呢？

我们看运行到浏览器的代码，来看一下qrcode实现二维码的方式

1. 创建 canvas 元素并设置 display 为 none 进行隐藏

2. 将 canvas 中的二维码图像转换为 base64 格式，创建 img 标签并设置其 src 属性为转换后的 base64 数据

但在部分手机上，尤其是微信内置浏览器中，canvas 元素未能被完全隐藏，导致其仍覆盖在 img 标签上方。这就造成了交互问题：用户长按二维码时，浏览器实际响应的是不可见 canvas 的事件，而非我们期望的 img 标签事件，最终使得微信无法触发识别二维码的功能。

解决方案

 new QRCode("qrcode", {
   width: 210,
   height: 210,
   text: this.qrcodeurl,
   correctLevel: QRCode.CorrectLevel.L,
   colorLight: "#ffffff",
   colorDark: "#000000",
});
let qrcodeEle = document.getElementById("qrcode");
let cvs = qrcodeEle.querySelector("canvas");
this.qrcodeimg = cvs.toDataURL("image/png");

生成二维码后，我们获取当前容器下的canvas元素，将其转换为base64编码格式。接着隐藏原始二维码生成容器，创建新的img元素并为其赋值。问题完美解决