qrcode生成二维码长按无法识别问题的解决
qrcode⽣成⼆维码长按⽆法识别问题的解决
最近⽤QRCode.js ⽣成⼆维码之后，发现在⼩⽶和华为⼿机的上⾯页⾯长按识别不了，苹果和其他⼿机浏览器是正常的。qrcode在页⾯⽣成会⽣成⼀个canvas标签和⼀个img标签，在电脑浏览器上调试的时候发现⽣成⼆维码之后canvas标签是会⾃动隐藏的，然后展⽰img标签，然后通过vConsole 发现在⼩⽶或者华为⼿机上⽣成的⼆维码是通过canvas展⽰的，img 标签被隐藏，⽽且img.src没有任何内容。怀疑是浏览器兼容问题。
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 ElementById("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("naver"); // make another code.
浏览器⽀持
IE6~10, Chrome, Firefox, Safari, Opera, Mobile Safari, Android, Windows Mobile, ETC.
长按识别⽅式
解决思路是从canvas中提取图⽚base64⾃⼰⽣成图⽚
html部分
<div id="codeDiv" ></div>
<div id="qrcode"></div>圣诞节暖心祝福语
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 ElementsByTagName('canvas')[0];
var img = convertCanvasToImage(canvas);
$('#qrcode').append(img);// 添加DOM
//从 canvas 提取图⽚ image
function convertCanvasToImage(canvas) {
//新建Image对象
var image = new Image();
/
/ DataURL 返回的是⼀串Base64编码的URL
image.src = DataURL("image/png");
return image;
}
参考
以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。