微信中 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元素并为其赋值。问题完美解决

相关推荐
风继续吹..1 小时前
后台管理系统权限管理:前端实现详解
前端·vue
yuanmenglxb20041 小时前
前端工程化包管理器:从npm基础到nvm多版本管理实战
前端·前端工程化
新手小新2 小时前
C++游戏开发(2)
开发语言·前端·c++
我不吃饼干2 小时前
【TypeScript】三分钟让 Trae、Cursor 用上你自己的 MCP
前端·typescript·trae
小杨同学yx3 小时前
前端三剑客之Css---day3
前端·css
星月心城4 小时前
Promise之什么是promise?(01)
javascript
二川bro4 小时前
第二篇:Three.js核心三要素:场景、相机、渲染器
开发语言·javascript·数码相机
Mintopia5 小时前
🧱 用三维点亮前端宇宙:构建你自己的 Three.js 组件库
前端·javascript·three.js
故事与九5 小时前
vue3使用vue-pdf-embed实现前端PDF在线预览
前端·vue.js·pdf
小西↬5 小时前
vite+vue3+websocket处理音频流发送到后端
javascript·websocket·音视频