解决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); // 放到页面

成功截图如下