解决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);