本文转载自http://www.uedsc.com/barcode-js.html
Barcode.js是一个基于jQuery库的插件,用于绘制条形码或者二维码,能够生成基于DIV+CSS或者Canvas等的条码,该插件支持PHP,jQuery和JavaScript,解压后对应3个目录,每个目录下都有对应的例子可以查看。
注意:需要绘制的条形码/二维码长度和字符串包含字母之类的,注意要选择不同的条形码/二维码类型,要不无法绘制(没研究过条形码,经测试视乎是这样的)。建议直接选择code128。
使用方法
1、同其他jQuery插件一样,只需要将jQuery框架和jquery.barcode.js
文件引入页面。
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.barcode.js"></script>
2、定义一个DOM对象作为生成条形码/二维码的容器
<div id="bcTarget"></div>
3、使用jQuery选择器调用barcode()
方法绘制条形码/二维码
$("#bcTarget").barcode("1234567890128", "ean13");
根据输入字符的长度来生成对应的条形码
function genCode(){
var encode = "ean8";
if(8 === $("#exam_no").text().length) encode = "ean8";
else if(11 === $("#exam_no").text().length) encode = "code11";
else if(13 === $("#exam_no").text().length) encode = "ean13";
$("#code_b").barcode($("#exam_no").text(), encode, {barWidth: 2, barHeight: 50});
$("#code_s").barcode($("#exam_no").text(), encode, {barWidth: 1, barHeight: 50});
$("#code_b div").css('background-color', '#eee');
}
参数说明
jquery对象扩展方法barcode参数说明:barcode: function(datas, type, settings)
datas参数支持2种类型
- string:要绘制的条形码字符串内容(依赖于条形码的类型)。如果条形码类型能容纳这些字符,并且存在校 验不是强制性的,字符串的ISE将会自动计算(原文:If barcode type include it, the presence of the checksum is not mandatory, it ise automatically recalculated)
- object
type : ean8, ean13, code11, code39, code128, codabar member Type code string type : std25, int25, code93 member Type code string crc boolean type : msi member Type code string crc boolean object crc1 : string(“mod10”, “mod11”) crc2 : string(“mod10”, “mod11”) type : datamatrix member Type code string rect boolean (default : false)
type (string):条形码类型
注意要根据字符串长度来选择条形码的编码方式,生成的条形码默认是DIV+CSS形式的,后面的barWidth
和barHeight
是生成参数,默认是70X70的正方形,后面的参数可以调整条形码的比例,但不能调整大小
- codabar
- code11 (code 11)
- code39 (code 39)
- code93 (code 93)
- code128 (code 128)
- ean8 (ean 8)
- ean13 (ean 13)
- std25 (standard 2 of 5 – industrial 2 of 5)
- int25 (interleaved 2 of 5)
- msi
- datamatrix (ASCII + extended)
settings (object):条形码样式的配置
配置名称 | 类型 | 默认值 | 描述 | 限制 |
---|---|---|---|---|
barWidth | int | 1 | 条形码宽度 | 1D |
barHeight | int | 50 | 容器高度 | 1D |
moduleSize | int | 5 | largeur / hauteur d’un module | 2D |
showHRI | bool | true | 是否显示条形码内容(方便识别) | |
bgColor | text | #FFFFFF | 背景色 | |
color | text | #000000 | 条形码颜色 | |
fontSize | int | 10 | 显示的条形码内容字体大小 | |
output | text | css | 如何绘制条形码: css, svg, bmp, canvas,注意svg,bmp,canvas不支持IE,最好不用 |
renderer : canvas | |||
---|---|---|---|
Parameter | Type | Default value | Detail |
posX | int | 0 | X origine |
posY | int | 0 | Y origine |