【FAQ】解决qrcode.js二维码插件不支持中文的问题

置顶 Space Chars

已于 2024-01-22 11:35:10 修改

阅读量1w

点赞数 34

分类专栏： FAQ 文章标签： qrcode jquery

于 2019-03-02 22:27:22 首次发布

本文链接：https://blog.csdn.net/qq_40890233/article/details/88082611

版权

FAQ 专栏收录该内容

5 篇文章 1 订阅

订阅专栏

前言

在日常的实际开发中，经常会遇到需要将数据转化为二维码的功能，网上一般都会推荐Qrcode 这款二维码js插件，但使用后都会发现它不支持中文，但不要慌

今天就为大家解决这个问题，先为大家展示下原版Qrcode插件生成中文后，二维码扫描的结果

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<script src="js/jQuery——2.js"></script>
		<script src="js/jquery.qrcode.min.js"></script>
	</head>
	<body>
		<div class="output"></div>
		<script>
			$(function() {
				$(".output").qrcode("优化qrcode.min.js中文乱码的解决方案");
		</script>
	</body>
</html>

扫描结果

可以明显看到中文字体乱码了，但官方，给出了解决方案，那就是先将中文字体转码，看：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<script src="js/jQuery——2.js"></script>
		<script src="js/jquery.qrcode.min.js"></script>
		<title>优化qrcode.min.js中文乱码的解决方案</title>
	</head>
	<body>
		<div class="output"></div>
		<script>
			$(function() {
				$(".output").qrcode(encodeURI("http://中文中文"));
			})
		</script>
	</body>
</html>

扫描结果

由于事先将中文转码了，所以扫描结果并未出现乱码，但缺点是，扫描后的结果需要再解码

冥想后。。。（30分钟）

好吧，看源码吧，

30分钟过去。。。

问题发现，发现原因在于：qrcode只是单纯采用charCodeAt()方式获取字符的Unicode编码进行转换，转换后并未处理中文字符编码（charCodeAt 是采用UTF-16编码制），所以他会出现中文乱码的问题；而下面的方法在转换为Unicode编码后，输出时再对中文字符编码进行fromCharCode代理，转为UTF-8，然后再生成二维码。

function toUtf8(str) {
	var out,//输出
	 	i,//字符索引
	  	len,//长度
	   	c;//charCodeAt 编码后的字符
	out = "";
	len = str.length;
	for(i = 0; i < len; i++) {
		c = str.charCodeAt(i);
		if((c >= 0x0001) && (c <= 0x007F)) {
			out += str.charAt(i);
		} else if(c > 0x07FF) {
			out += String.fromCharCode(0xE0 | ((c >> 12) & 0x0F));
			out += String.fromCharCode(0x80 | ((c >> 6) & 0x3F));
			out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));
		} else {
			out += String.fromCharCode(0xC0 | ((c >> 6) & 0x1F));
			out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));
		}
	}
	return out;
}

改良完成，看效果

插件比较：

改版后的插件不再需要之前那样先创建一个变量记录中文转化后的编码；而是直接根据开发需求，按照qrcode官方的API编写就行，这样就极大的简化了程序员在开发过程的编写量和难维护的问题

旧版本插件使用方法

	//中文格式转换
    var str = toUtf8("优化qrcode.min.js中文乱码的解决方案");
    //生成二维码
    $(".output").qrcode({
        render: "table",
        width: width,
        height: height,
        text: str
    });
    
    function toUtf8(str) {
	var out, i, len, c;
	out = "";
	len = str.length;
	for(i = 0; i < len; i++) {
		c = str.charCodeAt(i);
		if((c >= 0x0001) && (c <= 0x007F)) {
			out += str.charAt(i);
		} else if(c > 0x07FF) {
			out += String.fromCharCode(0xE0 | ((c >> 12) & 0x0F));
			out += String.fromCharCode(0x80 | ((c >> 6) & 0x3F));
			out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));
		} else {
			out += String.fromCharCode(0xC0 | ((c >> 6) & 0x1F));
			out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));
		}
	}
	return out;
}

新版本插件使用方法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<script src="js/jQuery——2.js"></script>
		<script src="http://www.xiongdi.fun/js_downloads/cxj.qrcode.min.js"></script>
		<title>优化qrcode.min.js中文乱码的解决方案</title>
	</head>
	<body>
		<div class="output"></div>
		<script>
			$(function() {
 				$('.output').qrcode({
 					render: "canvas", //也可以替换为table
 					foreground: "#000",
 					background: "#f2f2f2",
 					text:"优化qrcode.min.js中文乱码的解决方案"
 				});
			})
		</script>

	</body>
</html>