qrcode生成二维码微信长按无法识别问题的解决_qrcode生成的二维码无法识别资源-CSDN文库

196 浏览量 2020-12-02 04:35:27 上传评论收藏 45KB PDF 举报

资源推荐

资源详情

资源评论

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

最近用QRCode.js 生成二维码之后，发现在小米和华为手机的微信上面页面长按识别不了，苹果和其他手机浏览器是正常

的。qrcode在页面生成会生成一个canvas标签和一个img标签，在电脑浏览器上调试的时候发现生成二维码之后canvas标签

是会自动隐藏的，然后展示img标签，然后通过vConsole 发现在小米或者华为手机上生成的二维码是通过canvas展示的，img

标签被隐藏，而且img.src没有任何内容。怀疑是浏览器兼容问题。

jquery.qrcode.js 是一个纯浏览器生成 QRcode 的 jQuery 插件（（可以从https://github.com/jeromeetienne/jquery-qrcode 获

取）），它使用非常简单，生成的 QRcode 无需下载图片，并且不依赖第三方服务，插件压缩之后大小小于 4K。

QRCode.js 基本用法基本用法

引入JS库

<script src="jquery-1.8.3.js" type="text/javascript" charset="utf-8"></script>

<script src="jquery.qrcode.min.js" type="text/javascript" charset="utf-8"></script>

html部分

<div id="qrcode"></div>

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部分

<div id="codeDiv" style="display: none;"></div>

<div id="qrcode"></div>

js部分

var qrcode = new QRCode("codeDiv", {

text: codeUrl,

render: "canvas", //渲染方式指定canvas方式

width: 128,

height: 128,

typeNumber:-1,//计算模式

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余1页未读，立即下载

内容反馈

weixin_38673798

粉丝: 5
资源: 944

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈

feedback-tip