解决QRCODE生成的二维码微信长按不识别问题
2023/6/21 18:23:29
本文主要是介绍解决QRCODE生成的二维码微信长按不识别问题,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
问题描述
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);
这篇关于解决QRCODE生成的二维码微信长按不识别问题的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-05-09flutter3.x_macos桌面os实战
- 2024-05-09Rust中的并发性:Sync 和 Send Traits
- 2024-05-08使用Ollama和OpenWebUI在CPU上玩转Meta Llama3-8B
- 2024-05-08完工标准(DoD)与验收条件(AC)究竟有什么不同?
- 2024-05-084万 star 的 NocoDB 在 sealos 上一键起,轻松把数据库编程智能表格
- 2024-05-08Mac 版Stable Diffusion WebUI的安装
- 2024-05-08解锁CodeGeeX智能问答中3项独有的隐藏技能
- 2024-05-08RAG算法优化+新增代码仓库支持,CodeGeeX的@repo功能效果提升
- 2024-05-08代码报错不用愁,CodeGeeX一键完成代码修复、错误解释的功能上线了!
- 2024-05-08今天开始程序员不用再发愁写commit message了,全部由CodeGeeX自动完成!