JS的条形码和二维码生成
程序员文章站
2024-01-27 11:37:58
...
一、前言
最近做项目用到了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、二维码效果图
五、扩展学习
之前收藏了一张二维码动图详解,这里分享一下
下一篇: vertica备份与恢复(一)