解決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); // 放到頁面

成功截圖如下