转载

基于HTML5 Canvas的EAN13条形码生成插件

简要教程

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

查看演示 下载插件

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

基于HTML5 Canvas的EAN13条形码生成插件

使用方法

如果你需要将该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	在绘制条形码过程中发生错误时触发