前端生成二维码
Posted lyr1213
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了前端生成二维码相关的知识，希望对你有一定的参考价值。
上一篇写到调用微信扫一扫接口，现在来生成二维码、条形码。
在我们的系统中，使用订单号生成二维码、条形码，司机在公众号内扫描该二维码、条形码之后显示订单号及该订单详情，以供确认该订单是否可以签收。
一、jquery.qrcode.min.js 生成二维码
1、使用步骤
（1）引入文件：
<script src="jquery-2.1.0.js" type="text/javascript"></script>
<script type="text/javascript" src="jquery.qrcode.min.js"></script>
（2）在页面放一个二维码容器：
<body onLoad="init()">
<div id="qrcode"></div>
</body>
（3）使用 qrcode 方法生成二维码：
function generateQRCode(rendermethod, picwidth, picheight, url) {
$("#qrcode").qrcode({
render: rendermethod, // 渲染方式有table方式和canvas方式
width: picwidth, //宽度
height:picheight, //高度
text: utf16to8(url), //内容
typeNumber:-1,//计算模式
correctLevel:2,//二维码纠错级别
background:"#ffffff",//背景颜色
foreground:"#000000" //二维码颜色
});
}
function init() {
generateQRCode("table",200, 200, "test");
}
qrcode 方法中 render 参数表示渲染方式，有 table 方式和 canvas 方式， canvas 方式如下：
$(function(){
var qrcode = $(‘#qrcode‘).qrcode({
render: "canvas",
width: 120,
height: 120,
text: "SYDO1806090725140426"
}).hide();
//将生成的二维码转换成图片格式
var canvas = qrcode.find(‘canvas‘).get(0);
$(‘#qrcodeImg‘).attr(‘src‘, canvas.toDataURL(‘image/jpg‘));
});
其中将二维码转成图片形式，是方便转发，也可以不用，不用的话，qrcode 方法之后就不用用 hide() 方法了。
canvas 方式生成的二维码如下，利用之前上一篇的扫一扫，可以扫出生成二维码时候的参数（即 qrcode 方法里的 text 参数）：
2、中文编码问题
jquery-qrcode 是采用 charCodeAt() 方式进行编码转换的。而这个方法默认会获取它的Unicode编码，所以如果 text 参数带有中文，在生成二维码前就要把字符串转换成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 == 0x0001) && (c < 0x007F || 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;
}
3、generateQRCode 函数优化
将2说的中文问题加进 generateQRCode 函数：
function generateQRCode(rendermethod, picwidth, picheight, url) {
$("#qrcode").qrcode({
render: rendermethod, // 渲染方式有table方式（IE兼容）和canvas方式
width: picwidth, //宽度
height:picheight, //高度
text: utf16to8(url), //内容
typeNumber:-1,//计算模式
correctLevel:2,//二维码纠错级别
background:"#ffffff",//背景颜色
foreground:"#000000" //二维码颜色
});
}
二、生成条形码
以上是关于前端生成二维码的主要内容，如果未能解决你的问题，请参考以下文章
VS Code配置snippets代码片段快速生成html模板，提高前端编写效率
pbootcms对接微信扫码登录代码核心片段和步骤（前后端）