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

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
});                
              

回调函数