qrcode生成二维码微信长按无法识别问题

mo0n1andin 发布于2019-08-23 16:44 / 2219人阅读

摘要：最近用生成二维码之后，发现在小米和华为手机的微信上面页面长按识别不了，苹果和其他手机浏览器是正常的。怀疑是浏览器兼容问题。

最近用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

超融合服务器专线服务 qrcode生成二维码 qrcode二维码 jquery_qrcode二维码域名生成二维码

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/103225.html

使用 qrcodejs 生成二维码的几个问题

摘要：在这里的用法如下微信中多个二维码在一起识别错误这个问题，我也遇到了，根据网友的提示，微信是截屏识别的，所以会出现这种问题。示例代码这里代码跟前面脱节了，是另外的结构，仅作为示例代码是类似的一些的汇总对象微信中有两个挨着二维码长按识别的问题博客地址 Preface 产品希望我这边下载页面加个二维码，可以扫描下载 APP，并且希望二维码中有公司的 logo，很合理的需求，不过实现的时候依...

Lyux 2019-08-23 13:39 评论0 收藏0
canvas实现二维码和图片合成

摘要：上个版本街道一个需求，使用生成一个二维码，然后和另外一张图片合成一张图拍你，实现思路是这样的使用将生成供使用然后使用将两张图合成一张图片遇到的问题生成图片之后发现图片很模糊，解决办法是将画布扩大两倍，其他参数也夸大两倍就可以了可以使用上个版本街道一个需求，使用url生成一个二维码，然后和另外一张图片合成一张图拍你，实现思路是这样的使用jr-qrcode将url生成data:bas...

张汉庆 2019-08-05 14:32 评论0 收藏0
canvas实现二维码和图片合成

摘要：上个版本街道一个需求，使用生成一个二维码，然后和另外一张图片合成一张图拍你，实现思路是这样的使用将生成供使用然后使用将两张图合成一张图片遇到的问题生成图片之后发现图片很模糊，解决办法是将画布扩大两倍，其他参数也夸大两倍就可以了可以使用上个版本街道一个需求，使用url生成一个二维码，然后和另外一张图片合成一张图拍你，实现思路是这样的使用jr-qrcode将url生成data:bas...

JohnLui 2019-08-23 10:25 评论0 收藏0
30分钟做一个二维码名片应用，有源码！

摘要：前言分钟带你用做一个微信公众号上使用的二维码名片，相应技术点有详细讲解，高清有码点击下载全部源码二维码现在是无处不在，无孔不入了。二维码名片的应用就介绍到这里啦，码字不易，随手点赞哈前言 30分钟带你用Wex5做一个微信公众号上使用的二维码名片，相应技术点有详细讲解，高清有码！(点击下载全部源码) 二维码现在是无处不在，无孔不入了。大到一辆汽车，小到一包纸巾，身上都印有二维码，明码标...

littlelightss 2019-08-02 18:52 评论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