BARCODE条形码插件及ean13

1.BARCODE条形码插件

注意：barcode支持任意位数的数字转换为条形码

1）query.barcode.js安装

同其他jquery插件一样，只需要将jquery框架和jquery.barcode.js导入页面即可。

<script type="text/javascript" src="jquery-1.3.2.min.js"></script> 
<script type="text/javascript" src="jquery-barcode.js"></script>

2）jquery.barcode.js使用方法

2.1）定义一个DOM对象作为条形码/二维码的容器

<div id="bcTarget"></div>

2.2）使用javascript调用jquery.barcode.js绘制条形码/二维码

$("#bcTarget").barcode("1234567890128", "ean13");

jquery对象扩展方法barcode参数说明

barcode: function(datas, type, settings)  

1.datas参数支持2种类型

• string：要绘制的条形码字符串内容（依赖于条形码的类型）。如果条形码类型能容纳这些字符，并且存在校验不是强制性的，字符串的ISE将会自动计算（原文：If barcode type include it, the presence of the checksum is not mandatory, it ise automatically recalculated）
• object

2.type (string)：条形码类型

• 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)

3.settings (object)：条形码样式的配置

barWidth（条形码款）、barHeight（容器高）、showHRI（是否显示条形码内容）、bgColor（背景色）、color（条形码颜色）、fontSize（内容字体大小）、output（如何绘制条形码：css，svg，bmp，canvas，注意svg，bmp，canvas不支持IE，最好不用。）

 示例代码

<input type="button" onclick='$("#bcTarget").barcode("1234567890128", "ean13",{barWidth:2, barHeight:30});' value="ean13">
<input type="button" onclick='$("#bcTarget2").barcode("1234567", "int25",{barWidth:2, barHeight:30});' value="int25">  
<input type="button" onclick='$("#bcTarget3").barcode({code: "1234567", crc:false}, "int25",{barWidth:2, barHeight:30});' value="int25 without crc">  

 转载自：http://www.cnblogs.com/X-Jonney/p/5874405.html

2.ean13条形码生成器

注意：ean13只支持13位数字转换为条形码图片

简要教程 jQuery.EAN13.js是一款基于 HTML5   Canvas 的EAN13条形码生成插件。该EAN13条形码插件可以配合 jQuery 来使用，也可以通过纯JavaScript来进行调用。通过该插件可以非常轻松的在页面上生成EAN13条形码。

European Article Number (欧洲物品编码的缩写),其中共计13位代码的EAN-13是比较通用的一般终端产品的条形码协议和标准，主要应用于超级市场和其它零售业，因此这种是我们比较常见的，随便拿起身边的一个从超市买来的商品都可以从包装上看得到。关于条形码的结构介绍可以查看百度百科。

 使用方法

如果你需要将该EAN13条形码插件作为jQuery插件来使用，那么需要在页面中引入jQuery和jquery-ean13.min.js文件。

< script type = "text/javascript" src = "js/jquery.min.js" ></ script > < script type = "text/javascript" src = "dist/jquery-ean13.min.js" ></ script >

要通过纯JavaScript来调用该EAN13条形码，需要在页面中引入ean13.min.js文件。

< script type = "text/javascript" src = "dist/ean13.min.js" ></ script >

 HTML结构

要制作一个EAN13条形码需要在页面上添加一个<canvas>元素。

< canvas id = "ean" width = "400" height = "200" ></ canvas >

如果你想修改EAN13条形码的大小，只需要设置<canvas>元素的宽度和高度即可。

 调用插件

下面的方法会显示不带任何参数选项的最基本的EAN13条形码：

JavaScript：

var element = document.getElementById( "ean" ); new EAN13(element, "9002236311036" );

jQuery：

$( "#ean" ).EAN13( "9002236311036" );

 配置参数

该EAN13条形码插件提供了一些可用的配置参数和回调函数，要使用它们，可以简单的在初始化插件的时候在第二个参数中提供一个参数对象。例如：

JavaScript：

var options = {      number: false ,      prefix: false ,      onSuccess: function (){        alert( "Heeeey!" );      } }   new EAN13(document.getElementById( "ean" ), "9002236311036" , options);

jQuery：

$( "#ean" ).EAN13( "9002236311036" , {      number: false ,      prefix: false });

参数	类型	默认值	描述
number	boolean	true	如果设置为true，那么数字会以可读的方式显示在条形码的下方
prefix	boolean	true	如果设置为true，国家前缀（确切地来说，它的第一个数字）会被打印在条形码的左边
color	string	#000	条形码的颜色，接收任何CSS颜色：#ff0000, green, rgb(0,0,0) 或 rgb(0,0,0,0.5)
background	string	null	条形码的背景色，接收任何CSS颜色：#ff0000, green, rgb(0,0,0) 或 rgb(0,0,0,0.5)，默认值null=transparent
debug	boolean	false	如果设置为true，条形码上会被绘制某种模式，以用于识别线条
padding	int	0	在条形码间添加一些padding值，单位为像素

 回调函数

回调函数	描述
onValid	当提供的代码校验和是正确的时候触发，如果没有提供12位的校验码则不会触发
onInvalid	当提供的代码校验和是不正确的时候触发，如果没有提供12位的校验码则不会触发
onSuccess	在条形码绘制结束并且没有错误发生的时候触发
onError	在绘制条形码过程中发生错误时触发

转载自：https://www.v2ex.com/t/106607