bwip-js
Version:
JavaScript barcode generator supporting over 100 types and standards.
217 lines (200 loc) • 8.14 kB
HTML
<html><head><title>bwip-js - JavaScript Barcode Generator</title>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="../lib/demo.css">
<script type="text/javascript" src="../dist/bwip-js.js"></script>
<script type="text/javascript" src="../lib/symdesc.js"></script>
<script type="text/javascript" src="drawing-example.js"></script>
<script type="text/javascript">
window.addEventListener('load', function() {
var lastSymbol, lastBarText, lastAltText, lastOptions, lastRotate, lastScaleX, lastScaleY;
try {
lastSymbol = localStorage.getItem('bwipjsLastSymbol');
lastBarText = localStorage.getItem('bwipjsLastBarText');
lastAltText = localStorage.getItem('bwipjsLastAltText');
lastOptions = localStorage.getItem('bwipjsLastOptions');
lastRotate = localStorage.getItem('bwipjsLastRotate');
lastScaleX = +localStorage.getItem('bwipjsLastScaleX');
lastScaleY = +localStorage.getItem('bwipjsLastScaleY');
} catch (e) {
}
// Set up the select list of barcode types
var sel = document.getElementById('symbol');
var opts = [];
for (var id in symdesc) {
opts.push(symdesc[id]);
}
opts.sort(function (a,b) { return a.desc < b.desc ? -1 : 1 });
for (var i = 0, l = opts.length; i < l; i++) {
var elt = document.createElement('option');
elt.textContent = opts[i].desc;
elt.value = opts[i].sym;
sel.appendChild(elt);
}
sel.addEventListener('change', function(ev) {
var desc = symdesc[sel.value];
if (desc) {
document.getElementById('symtext').value = desc.text;
document.getElementById('symopts').value = desc.opts;
} else {
document.getElementById('symtext').value = '';
document.getElementById('symopts').value = '';
}
document.getElementById('symaltx').value = '';
var canvas = document.getElementById('canvas');
canvas.width = canvas.width;
});
if (lastSymbol) {
sel.value = lastSymbol;
} else {
sel.selectedIndex = 0;
}
var evt = document.createEvent("HTMLEvents");
evt.initEvent("change", false, true);
sel.dispatchEvent(evt);
if (lastBarText) {
document.getElementById('symtext').value = lastBarText;
document.getElementById('symaltx').value = lastAltText;
document.getElementById('symopts').value = lastOptions;
}
if (lastScaleX && lastScaleY) {
document.getElementById('scaleX').value = lastScaleX;
document.getElementById('scaleY').value = lastScaleY;
}
if (lastRotate) {
document.getElementById('rotate' + lastRotate).checked = true;
}
document.getElementById('scaleX').addEventListener('change', function(ev) {
document.getElementById('scaleY').value = ev.target.value;
});
document.getElementById('scaleX').addEventListener('click', function(ev) {
document.getElementById('scaleY').value = ev.target.value;
});
document.getElementById('render').addEventListener('click', render);
// Allow Enter to render
document.getElementById('params').addEventListener('keypress', function(ev) {
if (ev.which == 13) {
render();
ev.stopPropagation();
ev.preventDefault();
return false;
}
});
document.getElementById('versions').textContent =
'bwip-js ' + bwipjs.BWIPJS_VERSION + ' / BWIPP ' + bwipjs.BWIPP_VERSION;
});
function render() {
var elt = symdesc[document.getElementById('symbol').value];
var text = document.getElementById('symtext').value.trim();
var alttext = document.getElementById('symaltx').value.trim();
var options = document.getElementById('symopts').value.trim();
var rotate = document.querySelector('input[name="rotate"]:checked').value;
var scaleX = +document.getElementById('scaleX').value || 2;
var scaleY = +document.getElementById('scaleY').value || 2;
try {
localStorage.setItem('bwipjsLastSymbol', elt.sym);
localStorage.setItem('bwipjsLastBarText', text);
localStorage.setItem('bwipjsLastAltText', alttext);
localStorage.setItem('bwipjsLastOptions', options);
localStorage.setItem('bwipjsLastScaleX', scaleX);
localStorage.setItem('bwipjsLastScaleY', scaleY);
localStorage.setItem('bwipjsLastRotate', rotate);
} catch (e) {
}
// Clear the page
document.getElementById('output').textContent = '';
var canvas = document.getElementById('canvas');
canvas.height = 1;
canvas.width = 1;
canvas.style.visibility = 'hidden';
// Convert the options to an object.
let opts = {};
let aopts = options.split(' ');
for (let i = 0; i < aopts.length; i++) {
if (!aopts[i]) {
continue;
}
var eq = aopts[i].indexOf('=');
if (eq == -1) {
if (aopts[i][0] == '!') {
// !parameter => false
opts[aopts[i].substr(1)] = false;
} else {
// parameter => true
opts[aopts[i]] = true;
}
} else {
opts[aopts[i].substr(0, eq)] = aopts[i].substr(eq+1);
}
}
// Finish up the options object.
opts.text = text;
opts.bcid = elt.sym;
opts.scaleX = scaleX;
opts.scaleY = scaleY;
opts.rotate = rotate;
if (alttext) {
opts.alttext = alttext;
}
// Draw the bar code to the canvas using a custom drawing interface.
try {
// fixupOptions() modifies options values (currently padding and
// background color) to provide a simplified interface for the
// drawing code.
bwipjs.fixupOptions(opts);
bwipjs.render(opts, DrawingExample(opts, canvas));
canvas.style.visibility = 'visible';
} catch (e) {
// Watch for BWIPP generated raiseerror's.
var msg = (''+e).trim();
if (msg.indexOf("bwipp.") >= 0) {
document.getElementById('output').textContent = msg;
} else if (e.stack) {
// GC includes the message in the stack. FF does not.
document.getElementById('output').textContent =
(e.stack.indexOf(msg) == -1 ? msg + '\n' : '') + e.stack;
} else {
document.getElementById('output').textContent = msg;
}
}
}
</script>
</head><body>
<div id="header">
<div id="bwip-js">bwip-js // Barcode Writer in Pure JavaScript</div>
<div id="versions"></div>
</div>
<div id="params">
<table border=0 cellpading=0 cellspacing=0><tr>
<td style="vertical-align:top">
<table border=0 cellpading=0 cellspacing=0>
<tr><th>Barcode Type:<td><select id="symbol"></select>
<tr><th>Bar Text:<td><input id="symtext" type="text">
<tr><th>Alt Text:<td><input id="symaltx" type="text">
<tr><th>Options:<td><input id="symopts" type="text">
</table>
<td style="padding-left:10mm;vertical-align:top">
<table border=0 cellpading=0 cellspacing=5>
<tr><th>Scale X,Y:<td>
<input type="number" min=1 max=9 step=1 id="scaleX" value=2>
<input type="number" min=1 max=9 step=1 id="scaleY" value=2>
<tr><th>Image Rotation:<td>
<label for="rotateN"><input type="radio" name="rotate" value="N"
id="rotateN" checked>Normal</label>
<label for="rotateR"><input type="radio" name="rotate" value="R"
id="rotateR">Right</label>
<label for="rotateL"><input type="radio" name="rotate" value="L"
id="rotateL">Left</label>
<label for="rotateI"><input type="radio" name="rotate" value="I"
id="rotateI">Invert</label>
<tr><td><td><button style="margin-top:1ex" id="render">Show Barcode</button>
</table>
<tr><td><br>
</table>
</div>
<div id="content">
<canvas id="canvas" width=1 height=1 style="border:1px solid #fff;visibility:hidden"></canvas>
<div id="output" style="white-space:pre"></div>
</div>
</body>
</html>