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