使用QRCode生成的二维码,部分手机微信默认浏览器长按无法识别

hwJw19 发表于 2021/06/30 16:05:27 2021/06/30
【摘要】 之前工作中接触到的一个需求,在微信公众号上做一个活动,具体需求是根据不同的用户生成不同的分享链接,并将链接生成为二维码图片,并且此图片支持长按识别的功能。我最先想到的就是用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

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。