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、二維碼效果圖

五、擴展學習

之前收藏了一張二維碼動圖詳解，這裏分享一下