前端生成二维码/条形码

上一篇写到调用微信扫一扫接口，现在来生成二维码、条形码。

在我们的系统中，使用订单号生成二维码、条形码，司机在公众号内扫描该二维码、条形码之后显示订单号，以供确认该订单是否可以签收。

一、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方式
        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", 
             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方式
                 picwidth, //宽度
                height:picheight, //高度
                text: utf16to8(url), //内容
                typeNumber:-1,//计算模式
                correctLevel:2,//二维码纠错级别
                background:"#ffffff",//背景颜色
                foreground:"#000000"  //二维码颜色

            });
        }

二、jquery-barcode生成条形码

直接贴例子：

<html>
<head>
    <meta charset="UTF-8">
    <title>生成条形码</title>
    <script type="text/javascript" src="jquery-2.1.0.js"></script>
    <script type="text/javascript" src="jquery-barcode.js"></script>
    <script type="text/javascript">

        $(function(){
            $("#bcTarget").barcode("123456789", "codabar",{barWidth:2, barHeight:30});
            $("#bcTarget2").barcode("1234567890128", "ean13",{barWidth:2, barHeight:30});  // SYDO180609
            $("#genid").click(function(){
                var code = $("#orgcode").val();
                $("#mycode").barcode(code, "code93",{barWidth:2, barHeight:30});  // SYDO480408
               // $("#mycode").barcode(code, "code128",{barWidth:2, barHeight:30});  // SYDO431808
            });
        });

    </script>
</head>
<body>

1、条形码 codabar  <br><br>
<div id="bcTarget"></div><br>

2、条形码 ean13  <br><br>
<div id="bcTarget2"></div><br>

3、输入要生成条形码的数字(code93/code128):
<input type="text" id ="orgcode">&nbsp;&nbsp;<input type="button"  value="生成条形码" id="genid"/><br><br>
<div id="mycode"></div>


</body>
</html>

同样可以用上一篇的扫一扫，扫出生成条形码时候的参数。