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

相关推荐
芜青24 分钟前
JavaScript手录18-ajax:异步请求与项目上线部署
开发语言·javascript·ajax
织_网26 分钟前
Electron 核心 API 全解析:从基础到实战场景
前端·javascript·electron
vvilkim37 分钟前
深入理解 Spring Boot Starter:简化依赖管理与自动配置的利器
java·前端·spring boot
艾小码43 分钟前
前端安全防护手册:对抗XSS、CSRF、点击劫持等攻击
前端·安全·xss
2401_837088501 小时前
setup 语法糖核心要点
开发语言·前端·javascript
用户3379044802172 小时前
HTML5语义化标签详解
前端
唐某人丶2 小时前
教你如何用 JS 实现一个 Agent 系统(1)—— 认识 Agentic System
前端·人工智能
丘山子2 小时前
分享链接格式不统一,rel="share-url" 提案试图解决这个问题
前端·面试·html
你也向往长安城吗2 小时前
基于 navmesh 的路径搜索技术剖析 (游戏、三维方向必看!!!)
javascript·游戏·游戏开发
JustHappy2 小时前
「Versakit攻略」🔥Pnpm+Monorepo+Changesets搭建通用组件库项目和发包流程
前端·javascript·vue.js