qrcode生成的二維碼華為手機長按不識別問題

問題描述

qrcode生成的二維碼，在蘋果等手機上長按可識別，在華為手機上長按沒有反應，截圖保存下來長按又可以識別。

問題原因

瀏覽器兼容問題
qrcode在頁面生成二維碼時，會生成一個canvas標簽和一個img標簽。在電腦瀏覽器上調試的時候，發現生成二維碼之后canvas標簽是會自動隱藏的，然后展示img標簽，我們看到和識別的其實是圖片。但是在華為手機上生成的canvas是不會隱藏的，我們看到的是canvas，所以無法識別，截圖卻可以。

解決辦法

手動將canvas隱藏，獲取生成的鏈接拼到圖片里面。
html頁面：

function makeQRCode() {
    var qrcode = new QRCode(document.getElementById("QRCodeNone"), {
        text: params,//二維碼數據
        width: 200,
        height: 200
    });
    //在小米或者華為手機上生成的二維碼是通過canvas展示的，img標簽被隱藏,所以需要特殊處理一下，將canvas標簽隱藏，拿到生成的url放到img里面再展示出來
    var myCanvas = document.getElementsByTagName('canvas')[0];
    var img = convertCanvasToImage(myCanvas);
    $("#QRCode").append(img);
};
//將canvas返回的圖片添加到image里
function convertCanvasToImage(canvas){
    var image = new Image();
    image.src = canvas.toDataURL("image/png");
    return image;
}

toDataURL語法

canvas.toDataURL(type, encoderOptions);
返回一個包含圖片展示的 data URI
參數
type 可選
圖片格式，默認為image/png
encoderOptions 可選
圖片質量。取值范圍為0到1。如果指定圖片格式為image/jpeg或image/webp。如果超出取值范圍，將會使用默認值0.92。其他參數會被忽略。

返回值
包含dataURI的DOMString。
DataURI格式：data:[][;base64],。其中mediatype聲明了文件類型，遵循MIME規則，如“image/png”、“text/plain”；之后是編碼類型，這里我們只涉及 base64；緊接着就是文件編碼后的內容了。

借鑒網址：https://blog.csdn.net/weixin_40970987/article/details/94393259