本文轉載自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 |