一、使用jquery-qrcode生成二维码
先简单说一下jquery-qrcode，这个开源的三方库（可以从https://github.com/jeromeetienne/jquery-qrcode 获取），
qrcode.js 是实现二维码数据计算的核心类，
jquery.qrcode.js 是把它用jquery方式封装起来的，用它来实现图形渲染，其实就是画图（支持canvas和table两种方式）
支持的功能主要有：
- text : "https://github.com/jeromeetienne/jquery-qrcode" //设置二维码内容
- render : "canvas",//设置渲染方式
- width : 256, //设置宽度
- height : 256, //设置高度
- typeNumber : -1, //计算模式
- correctLevel : QRErrorCorrectLevel.H,//纠错等级
- background : "#ffffff",//背景颜色
- foreground : "#000000" //前景颜色
使用方式非常简单
- jQuery('#output').qrcode({width:200,height:200,correctLevel:0,text:content});
经过简单实践，
使用canvas方式渲染性能还是非常不错的，但是如果用table方式，性能不太理想，特别是IE9以下的浏览器，所以需要自行优化一下渲染table的方式，这里就不细述了。
二、JS生成中文二维码
其实上面的js有一个小小的缺点，就是默认不支持中文。
这跟js的机制有关系，jquery-qrcode这个库是采用 charCodeAt() 这个方式进行编码转换的，
而这个方法默认会获取它的 Unicode 编码，一般的解码器都是采用UTF-8, ISO-8859-1等方式，
英文是没有问题，如果是中文，一般情况下Unicode是UTF-16实现，长度2位，而UTF-8编码是3位，这样二维码的编解码就不匹配了。
解决方式当然是，在二维码编码前把字符串转换成UTF-8，具体代码如下：
- function utf16to8(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;
- }
参考：
https://github.com/jeromeetienne/jquery-qrcode
http://www.onicos.com/staff/iz/amuse/javascript/expert/utf.txt
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="js/jquery-1.8.3.js" type="text/javascript"></script>
<script src="js/qrcode.js" type="text/javascript"></script>
<script src="js/jquery.qrcode.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("#bt").bind("click", function () {
text = $("#text").val();
$("#div_div").qrcode(utf16to8(text));
})
})
function utf16to8(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;
}
</script>
</head>
<body>
<input type="text" id="text" />
<input type="button" value="shengc" id="bt" />
<div id="div_div" style="width:400px;height:400px;border:1px solid #000;"></div>
</body>
</html>
相关推荐
js实现特定字符生成二维码
一个用于生成QR码的javascript文件，来源：http://www.luqidong.com/demo/qrcode/js/qrcode.js 用法很简单 var qrcode = new QRCode(document.getElementById(div的Id), { width : 图片宽度 height : 图片高度 }...
前端字符串生成二维码并显示在页面上，qrcode.js——网页版，weapp-qrcode.js——微信小程序版。温馨提示:本人以防文件丢失上传备份，非诚勿扰，谢谢
把字符串生成二维码，并以Base64 URL形式输出。 文章 http://blog.csdn.net/zhyl8157121/article/details/51726011 的引用资源。
二维码生成所需要的js相关的文件，在html页面引入需要的js代码，输入要生成的文字，字符，字符串，代码里添加生成的图片链接，点击按钮生成，就有一个二维码的图片生成
通常我们做二维码用qrcode.js的时候会出现中文乱码这个情况，只是因为本身qrcode.js这个包没有编译中文，现在调用utf16to8.js可以解决这个问题啦！经过本人测试时没问题的，如果有问题，可以私信联系我的！
下面记录的是小程序中生成二维码图片这一操作，用的是原文作者改版后的生成二维码工具weapp-qrcode.js（demo的众多文件中只需将util下的这个文件拷贝到自己项目中），可在原文地址里clone demo。 截图（copy原文） ...
js扫码支付pc端,请求到数据字符串生成支付二维码,扫码支付pc端
现如今，二维码无处不在，扫一扫送抽纸，那么基于js二维码是如何生成的呢？面对这一问题，下面小编给分享一代码介绍javascript生成二维码图片小结，感兴趣的朋友一起学习吧
可以从qml传数据给C++，再通过C++处理数据形成想要的二维码。 顺便想吐槽一下，网上的资料坑的不少，连个图片刷新都有坑，没成功还发了博文。
将一个字符串（可以是中文，在生成二维码图片之前将中文转码）生成二维码图片，如果想要带log的二维码，可以在生成后的二维码中间部位自己添加一个小log，log图片不要太大，不然就扫描不出内容了。 代码如下: <...
使用一个js就能生成二维码 轻松搞定 文档里面有demo
qrcode包就是一个可以将字符串画出二维码的jquery包，这个里面包含了jquery1.8.3和qrcode以及jquery_qrcode包，在用的时候按照上面的顺序依次加载就可以了。调用方法qrcode()
qrcode包就是一个可以将字符串画出二维码的jquery包，这个里面包含了jquery1.8.3和qrcode以及jquery_qrcode包，在用的时候按照上面的顺序依次加载就可以了。调用方法qrcode()
你可以输入数字、字母组成的非汉字的字符串，动态的生成一维条形码
javascript根据字符串生成条形码与二维码
支持自定义二维码渲染规则，可通过 getModules 方法得到矩阵信息后，自行实现canvas渲染二维码，如随机颜色、圆点、方块、块与块之间的间距等，详情见示例中的 custom。 支持nvue生成，但暂不支持保存。 联系方式：...
前端生产二维码的js,测试过了能用，$('#qrcode').html('').qrcode({ text: "生成二维码的字符串"});
qrcode包就是一个可以将字符串画出二维码的jquery包，这个里面包含了jquery1.8.3和qrcode以及jquery_qrcode包，在用的时候按照上面的顺序依次加载就可以了。调用方法qrcode()
今天还是要讲一下关于二维码的知识，前几篇讲解中有讲到我使用的可以生成二维码的js是qrcode.js，然后结合Cordovad的插件$cordovaBarcodeScanner插件可以扫描二维码，这样就基本完成了简单的扫一扫功能。后来在项目...