JS的条形码和二维码生成

一、前言

最近做项目用到了JS生成条形码和二维码，内容不多，整理一下方便使用。

2018年7月5日更新：

二维码生成时，如果长度太长会有异常：
Uncaught Error: code length overflow. (1604>1056)
创建的时候，添加 correctLevel: 3 就可以解决了。

二、资源打包下载

资源下载

三、JS条形码生成

1、Github

这里是作者的Github，有更详细的内容可以学习：
https://github.com/lindell/JsBarcode

2、JS引用

<script type="text/javascript" src="jquery-2.1.3.min.js"></script>
<script type="text/javascript" src="JsBarcode.all.min.js"></script>

3、主要代码

<script>
    $("#svgcode").JsBarcode('Hi!');//or JsBarcode("#svgcode", "Hi!");
    $("#canvascode").JsBarcode('Hello world!');//or JsBarcode("#canvascode", "Hello world!");
    JsBarcode("#imgcode", "20170715152058515");//or $("#imgcode").JsBarcode("I'm huangenai!");
</script>

4、条形码效果图

四、JS二维码生成

1、Github

这里是作者的Github，有更详细的内容可以学习：
https://github.com/davidshimjs/qrcodejs

2、Js引用

<script type="text/javascript" src="jquery-2.1.3.min.js"></script>
<script type="text/javascript" src="qrcode.js"></script>

3、主要代码

var qrcode = new QRCode(document.getElementById("qrcode"), {
    width: 400,
    height: 400,
    correctLevel: 3
});
function makeCode() {
    var elText = document.getElementById("text");

    if (!elText.value) {
        alert("Input a text");
        elText.focus();
        return;
    }

    qrcode.makeCode(elText.value);
}

4、二维码效果图

五、扩展学习

之前收藏了一张二维码动图详解，这里分享一下