Render 1-D barcodes to canvas or svg. Supports Code 128, 3 of 9, 2 of 5, EAN, and more.
Why?
This barcode library specializes in its use of the canvas API. You provide a canvas (be it in a browser or with node-canvas), and then specify where the barcode should be drawn, how large it should be, and at what angle.
Other barcode libraries that I found created pngs or svgs directly and were not very flexible in the output size (i.e. no maxWidth option). Rendering directly to a canvas allows for a flexible API if that's your target anyway.
Demos/Playground
First of all, check out the demos.
How?
1// In the browser 2var canvas = document.getElementById("barcode-canvas"); 3var g = canvas.getContext("2d"); 4drawBarcode(g, "Test barcode", options);
1// On the server 2var bardcode = require("bardcode"); 3var Canvas = require("canvas"); 4var canvas = new Canvas(595, 842, "pdf"); 5var g = canvas.getContext("2d"); 6bardcode.drawBarcode(g, "Test barcode", options);
1// Meteor server 2var Canvas = Meteor.npmRequire("canvas"); 3var canvas = new Canvas(595, 842, "pdf"); 4var g = canvas.getContext("2d"); 5drawBarcode(g, "Test barcode", options);
Symbology
The following barcode formats are supported:
- Codabar
- Code 128
- Code 39
- EAN-8
- EAN-13
- FIM
- ITF (interleaved 2 of 5)
- UPC-A
API
1// browser+meteor 2drawBarcode(g, barcodeText, options); 3 4// node 5var bardcode = require("bardcode"); 6bardcode.drawBarcode(g, barcodeText, options);
gis a Canvas' 2-D graphics context or the output format. The only supported non-canvas output format is"svg".barcodeTextis a string. Allowed characters depend on the chosen symbology.optionsis an optional object with the following properties:options.typeBarcode type. Defaults to Code 128. Other valid options are "Codabar", "Code 39", "EAN-8", "EAN-13", "FIM", "ITF" (interleaved 2 of 5), and "UPC-A".options.hasChecksumIf true, the barcode already has a checksum (which will be validated); if false, calculate and add a checksum. Defaults to false. Currently works only for EAN-type barcodes (EAN-8, EAN-13, UPC-A).options.xWhere to draw barcode. Defaults to 0.options.yWhere to draw the barcode. Defaults to 0.options.horizontalAlignHow to align the barcode. Defaults to "left". Other options are "center" and "right".options.verticalAlignHow to align the barcode. Defaults to "top". Other options are "middle" and "bottom".options.heightBarcode height. Defaults to 90.72.options.moduleWidthWidth of thinnest bar. Defaults to 2.892.options.quietZoneSizeNumber of moduleWidths in quiet zone on either side. Defaults to 10.options.angleRotate barcode this many degrees clockwise. Defaults to 0.options.maxWidthMaximum barcode width (including quiet zones). If specified, then the moduleWidth will be adjusted if necessary to make the entire barcode fit in the given width.options.widthIf given, then ignore moduleWidth and maxWidth and set the moduleWidth so that the barcode will have the given width (including quiet zones).
Note: width and maxWidth refer to the unrotated barcode width.
SVG
If the first parameter to bardcode.drawBarcode, g, is "svg", then an SVG string is returned.
For the moment, the only supported options when using SVG are:
options.typeoptions.heightoptions.moduleWidthoptions.quietZoneSizeoptions.maxWidthoptions.width
Errors
Errors are thrown on invalid input, for example when including letters in EAN barcodes.
Installation
node-canvas installation causes issues for a lot of users. So it's an optional dependency (i.e. you should Bring Your Own Canvas). It's also not a node dependency because it's not the only output format.
For the browser:
- Include
dist/bardcode.jsordist/bardcode.min.js
For node:
npm install canvas(requires cairo)npm install bardcode
For meteor:
- (optional)
meteor add meteorhacks:npmand add"canvas": "1.1.6"topackages.json meteor add froatsnook:bardcode
Testing
Tests require meteor and zbar.
- Download zbar: http://zbar.sourceforge.net/
./configure --disable-video --without-qt --without-gtk --without-pythonmake- Copy
zbarimg/zbarimgandzbar/.libs/libzbar.so*to a new directory calledzbarinbardcode's project directory meteor test-packages ./inbardcode's project directory- Open
localhost:3000in a browser
Contributors
Thank you:
License
MIT