关于qrcode.js二维码插件不支持中文的解决方案
前言
最近在开发一个web项目的时候遇到了一个需要将短信链接转化为二维码的问题，于是我到网上去搜了一圈，发现了qrcode这款jQuery 二维码插件，于是按照qrcode的API文档使用了一下，发现如果是全英文的字符还可以正常运行，但如果出现中文就会出现中文乱码的问题（注：详细运行结果及代码如下）；
<!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("优化qrcode.min.js中文乱码的解决方案");
</script>
</body>
</html>
随后我又在jQuery插件库中寻找了一大圈，最后在jQuery中关于qrcode插件的API文档中发现了一个解决方案；但发现还是有缺陷，因为他使用的是encodeURL进行转码，所以只能在网址中存在中文的情况下使用（注：详细运行结果及代码如下）；还是不适合使用在发送短信和全中文字符的情况下使用。
<!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>
最后实在没办法，最后我将这款插件初略的看了一遍，发现原因在于：qrcode是采用charCodeAt()方式进行编码转换的，所以他会出现中文乱码的问题；而下面这种方法默认会获取它的Unicode编码，如果有中文内容，在生成二维码前就要把字符串转换成UTF-8，然后再生成二维码。
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;
}
我相信这个方法我相信和多人在网上也有看到过，但在使用的时候都会先创建一个变量记录转化后的字符，可是你不觉得这样很麻烦吗？于是我又去仔细看了一遍qrcode插件的源码，最后经过我的更改，让这款原本不支持中文字符的插件能够支持繁简中文。
插件比较：
改版后的插件不再需要之前那样先创建一个变量记录中文转化后的Unicode编码；而是直接根据开发需求，按照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>