bwip-js

// Barcode Writer in Pure JavaScript

bwip-js is a translation to native JavaScript of the amazing code provided in Barcode Writer in Pure PostScript. The translated code can run on any browser that natively supports the HTML canvas element or any JavaScript-based server framework that can implement a minimal bitmap graphics interface.

• Current bwipjs version is 0.10.6
• Current BWIPP version is 2015-03-24.

6-April-2015: The Node.js module is compatible with versions 0.10 and 0.12.

bwip-js links:

• Home Page
• Repository
• Free Online Barcode Generator
• Online Barcode API
• BWIPP Documentation
• Symbologies Supported by BWIPP/bwip-js

New in bwip-js

Scalable fonts, finally! An Emscripten compiled version of the FreeType library is now integrated into bwip-js.

Version 0.8 is an API-breaking release. If you have implemented code based on previous versions, you must update your code in three areas. This wiki page describes the changes.

Embedded in the FreeType library are open-source versions of the OCR-A and OCR-B fonts provided by the Tsukurimashou Font Family project.

A description of how FreeType was compiled for use with bwip-js can be found at: Compiling FreeType with Emscripten.

Online Barcode Generator

An online barcode generator demonstrates all of the features of bwip-js. It showcases the new font rendering provided by the FreeType library, and allows using your own fonts. All fonts are stored locally on your computer; the generator is 100% client-side JavaScript.

The demo is tested on the latest versions of Firefox and Chrome, along with IE10. IE11+ should work, and so should the latest versions of Opera and Safari, but they are untested.

Online Barcode API

A bwip-js barcode service is available online, ready to serve up barcode images on demand.

You can generate barcodes from anywhere on the web. Embed the URLs in your HTML documents or retrieve the barcode images directly from your non-JavaScript server. (JavaScript-based servers should use the bwip-js code directly - it will be a lot more performant.)

For details on how to use this service, see Online Barcode Generator API.

Node.js

The online barcode service is implemented as a node.js application. The code used for the service is available as part of the bwip-js source code. See the Barcode API for details on how the URL query parameters must be structured.

The following is a minimal example of how to use the node module:

// Simple HTTP server that renders bar code images using bwip-js.
var http   = require('http');
var bwipjs = require('bwip-js');

// Example of how to load a font into bwipjs. 
//	bwipjs.loadFont(fontname, sizemult, fontdata)
//
// To unload a font (and free up space for another):
//	bwipjs.unloadFont(fontname)
//
bwipjs.loadFont('Inconsolata', 108,
            require('fs').readFileSync('Inconsolata.otf', 'binary'));

http.createServer(function(req, res) {
	// If the url does not begin /?bcid= then 404.  Otherwise, we end up
	// returning 400 on requests like favicon.ico.
	if (req.url.indexOf('/?bcid=') != 0) {
	    res.writeHead(404, { 'Content-Type':'text/plain' });
		res.end('BWIP-JS: Unknown request format.', 'utf8');
	} else {
		bwipjs(req, res);
	}

}).listen(3030);

If you use the above server code with node, test with the following URL:

http://localhost:3030/?bcid=isbn&text=978-1-56581-231-4+52250&includetext&guardwhitespace

The bwip-js module is designed to operate only on the URL query parameters and ignores all path information. Your application is free to structure the URL path as needed to implement the desired HTTP request routing.

There are no npm dependencies on the module. The PNG encoder is implemented entirely in JavaScript using the built-in zlib module. See the file node-zlibPNG for details.

Features

The barcode images generated by bwip-js are essentially identical to using BWIPP with Ghostscript. The most significant difference is the use of the OCR-A and OCR-B fonts as the defaults in bwip-js. Barcodes and the OCR fonts are like chocolate and hazelnut; they were meant to go together. Unfortunately, most PostScript environments do not provide the OCR fonts and must fallback to Courier, Helvetica, and other less-than-ideal typefaces.

The following two images show the differences in typeface. The image below was rendered by bwip-js:

And the next image was rendered using BWIPP with Ghostscript:

The new font functionality is implemented with the following logic:

• OCR-B is used as the default font for all barcodes.
• OCR-A is used for the extra text on the ISBN, ISMN and ISSN symbols.

These defaults can be overridden using BWIPP options. The fonts are known to the PostScript emulation as OCR-A and OCR-B. For example, to switch the font to OCR-A, you would specify the option:

textfont=OCR-A

For the text above the barcode on the ISBN, ISMN, and ISSN symbols, the font can be changed using isbntextfont, ismntextfont, and issntextfont, respectively.

The code in demo.html shows how to load your own fonts into bwip-js. See Preloading Fonts Into FreeType and Loading Fonts During Runtime for descriptions of the two techniques.

The online barcode generator pre-loads the Inconsolata font, which can be seen using the option:

textfont=Inconsolata

For example, we can render an alternate version of the ISBN barcodes shown above with the Inconsolata font using the BWIPP options:

includetext guardwhitespace textfont=Inconsolata isbntextfont=Inconsolata isbntextsize=11

Installation

You can download the latest package at:

https://github.com/metafloor/bwip-js/releases/latest

Unzip the download package. bwip-js will be unpacked into the following directory structure:

bwip-js/
	bwip.js			# Main bwip-js code.
	demo.html		# The bwip-js demo
	freetype.js		# The Emscripten-compiled FreeType library
	freetype.js.mem	# Demand loaded memory image
	node-bwipjs		# Node.js module
	node-zlibPNG	# Node.js module that implements a PNG encoder
	bwipp/			# The cross-compiled BWIPP encoders and renderers
	lib/			# Utilities required by the demo

Usage

Using the demo with a file:// URL is no longer supported.

Emscripten optimizes the FreeType library by separating the memory intialization image and using XHR (when running in a browser) to demand load it. Because of this, you can no longer reliably use the demo via the file:// scheme in a browser's URL bar. Firefox supports XHR with file://, Chrome and IE do not.

To run the demo from your HTTP server, you should install the bwip-js directory under the server's root document directory and modify the server's configuration files, if necessary. Then navigate your browser to the bwip-js/demo.html file.

bwip-js was designed to run in both client-side and server-side JavaScript environments. For server-side environments that do not provide a graphics API, there are freely available pure-JavaScript implementations of image file formats like PNG and BMP. A quick search of the web turns up several possibilities that can be adapted for server-side usage.

The file demo.html provides a detailed example of how to use bwip-js in the browser. The file server.js shows how to use it as a node.js module.

If you would like to implement your own interface to bwip-js, see Integrating bwip.js Into Your Code.

Supported Barcode Types

• AusPost 4 State Customer Code • Aztec Code • Aztec Runes • BC412 • Channel Code • Codabar • Codablock F • Code 11 • Code 128 • Code 16K • Code 25 • Code 39 • Code 39 Extended • Code 49 • Code 93 • Code 93 Extended • Code One • Compact Aztec Code • Compact PDF417 • COOP 2 of 5 • Custom 1D symbology • Custom 4 state symbology • Data Matrix • Datalogic 2 of 5 • Deutsche Post Identcode • Deutsche Post Leitcode • EAN-13 • EAN-13 Composite • EAN-2 (2 digit addon) • EAN-5 (5 digit addon) • EAN-8 • EAN-8 Composite • Flattermarken • GS1 Composite 2D Component • GS1 Data Matrix • GS1 DataBar Expanded • GS1 DataBar Expanded Composite • GS1 DataBar Expanded Stacked • GS1 DataBar Expanded Stacked Composite • GS1 DataBar Limited • GS1 DataBar Limited Composite • GS1 DataBar Omnidirectional • GS1 DataBar Omnidirectional Composite • GS1 DataBar Stacked • GS1 DataBar Stacked Composite • GS1 DataBar Stacked Omnidirectional • GS1 DataBar Stacked Omnidirectional Composite • GS1 DataBar Truncated • GS1 DataBar Truncated Composite • GS1 QR Code • GS1-128 • GS1-128 Composite • GS1-14 • HIBC Codablock F • HIBC Code 128 • HIBC Code 39 • HIBC Data Matrix • HIBC MicroPDF417 • HIBC PDF417 • HIBC QR Code • IATA 2 of 5 • Industrial 2 of 5 • Interleaved 2 of 5 (ITF) • ISBN • ISMN • ISSN • Italian Pharmacode • ITF-14 • Japan Post 4 State Customer Code • Matrix 2 of 5 • MaxiCode • Micro QR Code • MicroPDF417 • Miscellaneous symbols • MSI Modified Plessey • PDF417 • Pharmaceutical Binary Code • Pharmazentralnummer (PZN) • Plessey UK • PosiCode • QR Code • Royal Dutch TPG Post KIX • Royal Mail 4 State Customer Code • SSCC-18 • Telepen • Telepen Numeric • Two-track Pharmacode • UPC-A • UPC-A Composite • UPC-E • UPC-E Composite • USPS Intelligent Mail • USPS PLANET • USPS POSTNET •

Emulator Notes

bwip-js does not provide a general purpose PostScript emulation layer. The emulation supports only the PostScript operators used by BWIPP. The emulation is implemented as a cross-compiler that converts all non-graphics code to equivalent JavaScript, and converts all graphics operations to calls into a platform-neutral graphics context. It is up to the host environment to implement the bitmap interface that is exposed by the graphics context. An example implementation is provided in the demo.

The emulation uses, as much as possible, native JavaScript data types:

• Boolean values true and false
• Null value
• Numeric values (integer and float)
• Objects (PostScript dictionary object)
• Function objects

You will note that two of the more common JavaScript data types, strings and arrays, are not on the list. PostScript implements live-view semantics with strings and arrays, similar to JavaScript's Typed Arrays and Views. For that matter, PostScript strings can be implemented using Uint8Arrays but PostScript arrays have no similar JavaScript equivalent. We must wait for ECMAScript6's computed property name getters and setters to land in the primary browsers before arrays can be handled cleanly.