qrcode生成二維碼微信長按無法識別問題

mo0n1andin 發布于2019-08-23 16:44 / 2361人閱讀

摘要：最近用生成二維碼之后，發現在小米和華為手機的微信上面頁面長按識別不了，蘋果和其他手機瀏覽器是正常的。懷疑是瀏覽器兼容問題。

最近用QRCode.js 生成二維碼之后，發現在小米和華為手機的微信上面頁面長按識別不了，蘋果和其他手機瀏覽器是正常的。qrcode在頁面生成會生成一個canvas標簽和一個img標簽，在電腦瀏覽器上調試的時候發現生成二維碼之后canvas標簽是會自動隱藏的，然后展示img標簽，然后通過vConsole 發現在小米或者華為手機上生成的二維碼是通過canvas展示的，img標簽被隱藏，而且img.src沒有任何內容。懷疑是瀏覽器兼容問題。

QRCode.js 基本用法
html部分

js部分

// 設置要生成二維碼的鏈接
new QRCode(document.getElementById("qrcode"), codeUrl);

或者

var qrcode = new QRCode("qrcode", {
    text: codeUrl,
    width: 128,
    height: 128,
    colorDark : "#000000",
    colorLight : "#ffffff",
    correctLevel : QRCode.CorrectLevel.H //容錯級別
});

容錯級別，可設置為：
QRCode.CorrectLevel.L
QRCode.CorrectLevel.M
QRCode.CorrectLevel.Q
QRCode.CorrectLevel.H

清除重新生成

qrcode.clear(); // clear the code.
qrcode.makeCode("http://naver.com"); // make another code.

瀏覽器支持

IE6~10, Chrome, Firefox, Safari, Opera, Mobile Safari, Android, Windows Mobile, ETC.

長按識別方式
解決思路是從canvas中提取圖片base64自己生成圖片
html部分

js部分

var qrcode = new QRCode("codeDiv", {
        text: codeUrl,
        render: "canvas",  //渲染方式指定canvas方式
        width: 128,
        height: 128,
        typeNumber:-1,//計算模式
        colorDark : "#000000",   
        colorLight : "#ffffff",   
        correctLevel : QRCode.CorrectLevel.H  
    });
    var canvas=document.getElementsByTagName("canvas")[0];
    var img = convertCanvasToImage(canvas);
    $("#qrcode").append(img);// 添加DOM
    //從 canvas 提取圖片 image  
    function convertCanvasToImage(canvas) {  
     //新建Image對象
     var image = new Image();  
     // canvas.toDataURL 返回的是一串Base64編碼的URL
     image.src = canvas.toDataURL("image/png");  
     return image;  
   }

參考
CSDN
GitHub

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/103225.html

使用 qrcodejs 生成二維碼的幾個問題

摘要：在這里的用法如下微信中多個二維碼在一起識別錯誤這個問題，我也遇到了，根據網友的提示，微信是截屏識別的，所以會出現這種問題。示例代碼這里代碼跟前面脫節了，是另外的結構，僅作為示例代碼是類似的一些的匯總對象微信中有兩個挨著二維碼長按識別的問題博客地址 Preface 產品希望我這邊下載頁面加個二維碼，可以掃描下載 APP，并且希望二維碼中有公司的 logo，很合理的需求，不過實現的時候依...

Lyux 2019-08-23 13:39 評論0 收藏0
canvas實現二維碼和圖片合成

摘要：上個版本街道一個需求，使用生成一個二維碼，然后和另外一張圖片合成一張圖拍你，實現思路是這樣的使用將生成供使用然后使用將兩張圖合成一張圖片遇到的問題生成圖片之后發現圖片很模糊，解決辦法是將畫布擴大兩倍，其他參數也夸大兩倍就可以了可以使用上個版本街道一個需求，使用url生成一個二維碼，然后和另外一張圖片合成一張圖拍你，實現思路是這樣的使用jr-qrcode將url生成data:bas...

JohnLui 2019-08-23 10:25 評論0 收藏0
入門hexo ! 搭配next、GiteePages，輕松免費開發高質量個人博客 ( Linux D

摘要：本文重點介紹下開發搭配，免費輕松實現高質量高顏值博客。其他系統的方法大同小異，只是環境配置略有不同，只要有和環境便可輕松入門。本篇內容也可以查看我的個人博客 showImg(https://upload-images.jianshu.io/upload_images/15934130-09520016b6b12e80.jpg?imageMogr2/auto-orient/strip%7...

raoyi 2019-08-23 14:47 評論0 收藏0