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

引言

我们先来看这样一段代码

html 复制代码
 <div
   id="qrcode"
   ref="qrcode"
   class="bind-code-img"
   style="
   height: 180px;
   width: 180px;
   margin-top: 22px;
   display: none;
"></div>
javascript 复制代码
 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 标签事件,最终使得微信无法触发识别二维码的功能。

解决方案

javascript 复制代码
 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元素并为其赋值。问题完美解决

相关推荐
一斤代码5 小时前
vue3 下载图片(标签内容可转图)
前端·javascript·vue
中微子5 小时前
React Router 源码深度剖析解决面试中的深层次问题
前端·react.js
光影少年6 小时前
从前端转go开发的学习路线
前端·学习·golang
中微子6 小时前
React Router 面试指南:从基础到实战
前端·react.js·前端框架
3Katrina6 小时前
深入理解 useLayoutEffect:解决 UI "闪烁"问题的利器
前端·javascript·面试
前端_学习之路7 小时前
React--Fiber 架构
前端·react.js·架构
coderlin_7 小时前
BI布局拖拽 (1) 深入react-gird-layout源码
android·javascript·react.js
伍哥的传说7 小时前
React 实现五子棋人机对战小游戏
前端·javascript·react.js·前端框架·node.js·ecmascript·js
qq_424409197 小时前
uniapp的app项目,某个页面长时间无操作,返回首页
前端·vue.js·uni-app
我在北京coding7 小时前
element el-table渲染二维对象数组
前端·javascript·vue.js