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

效果圖

五、擴充套件學習

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