使用QRCode生成的二维码，部分手机微信默认浏览器长按无法识别
【摘要】 之前工作中接触到的一个需求，在微信公众号上做一个活动，具体需求是根据不同的用户生成不同的分享链接，并将链接生成为二维码图片，并且此图片支持长按识别的功能。我最先想到的就是用QRCode.js来完成这个需求。QRCode.js 是一个用于生成二维码的 JavaScript 库。主要是通过获取 DOM 的标签,再通过 HTML5 Canvas 绘制而成,不依赖任何库。基本使用方法如下：引入QRC...
之前工作中接触到的一个需求，在微信公众号上做一个活动，具体需求是根据不同的用户生成不同的分享链接，并将链接生成为二维码图片，并且此图片支持长按识别的功能。
我最先想到的就是用QRCode.js来完成这个需求。QRCode.js 是一个用于生成二维码的 JavaScript 库。主要是通过获取 DOM 的标签,再通过 HTML5 Canvas 绘制而成,不依赖任何库。
基本使用方法如下：
引入QRCode.js ：
<script type='text/javascript' src='qrcode.min.js'></script>然后定义一个元素，并生成二维码：
<div id="qrcode"></div>
<script type="text/javascript">
new QRCode(document.getElementById("qrcode"), "https://bbs.huaweicloud.com/"); // 设置要生成二维码的链接
</script>
或者可以用可选参数来生成：
var qrcode = new QRCode("qrcode", {
text: "https://bbs.huaweicloud.com/",
width: 128,
height: 128,
colorDark : "#000000",
colorLight : "#ffffff",
correctLevel : QRCode.CorrectLevel.H
});
以上是基础用法，但是我使用后测试的时候，发现这样生成的二维码，在安卓手机上可以长按识别，但是在苹果手机上就做不到。因为qrcode在页面生成会生成一个canvas标签和一个img标签，因为设备兼容的问题，有的设备会显示img隐藏canvas,而有的设备恰恰相反。
解决方法是从canvas中获取图片的base64地址，然后在页面中新建一个元素，将用base64地址重新生成的img标签插入进去，而原始用qrcode生成的元素隐藏即可。
具体示例代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width = device-width,initial-scale = 1,minimum-scale = 1,maximum-scale = 1,user-scalable = no" />
<title>qrcode test</title>
<script type="text/javascript">
document.documentElement.style.fontSize = document.documentElement.clientWidth / 3.75 + 'px';
var version = Date.now();
document.write("<link rel='stylesheet' href='../center_css/reset.css?v=" + version + "'/>");
document.write("<script type='text/javascript' src='../center_js/jquery-1.8.3.min.js?v=" + version + "'><\/script>");
document.write("<script type='text/javascript' src='../center_js/qrcode.min.js'><\/script>");
</script>
<style>
html,
body {
width: 100%;
height: 100%;
background-image: url(../center_images/qmyxsharebg.jpg);
background-repeat: no-repeat;
background-size: 100% 100%;
margin: 0;
padding: 0;
}
#qrcode{text-align: center;padding-top: 0.8rem;}
#qrcode img{width: 1.36rem;height: 1.36rem;padding: 0.16rem;background-color: #fff;border-radius: 0.1rem;}
</style>
</head>
<body>
<div>
<div id="codeDiv" style="display: none;"></div>
<div id="qrcode"></div>
<div>
<p>长按二维码</p>
</div>
</div>
<script>
$(function() {
//生成二维码
var qrcode = new QRCode("codeDiv", {
text: haobanlink,
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;
}
})
</script>
</body>
</html>
怎么样？是不是很简单？其实主要是思路的问题，当我们知道问题的症结所在，再去解决问题，就会变得容易很多，借助华为云博客的平台，记录一下曾经遇到的问题，以便将来复用~
【版权声明】本文为华为云社区用户原创内容，转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息， 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）