forked from zingl/2D-Barcode
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathbarcode.html
386 lines (373 loc) · 19.9 KB
/
barcode.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta charset="utf-8" />
<meta name="description" content="Official documentation for JSDoc 3.">
<meta name="keywords" content= "bar code, barcode, 2D, symbol, data matrix, QR, micro QR, Aztec, Code 128, PDF417, program, open source, public domain, free software, SVG, GIF, javascript" />
<script type="text/javascript" src="barcode.js"></script>
<script type="text/javascript" src="kanji.js"></script> <!-- unicode conversion string, omit if kanji encoding in QRCode isn't needed -->
<link rel="Stylesheet" type="text/css" href="barcode.css" />
<link rel="SHORTCUT ICON" href="favicon.ico" />
<style>
[tabs] {
display: flex;
position: fixed;
z-index:2;
padding: 0px;
font-size: 1em;
padding: 5px 20px;
width: 700px;
border-right:0px;
}
[tabs] > * {
flex:1;
font-size: 1.5em;
padding: 10px 20px;
cursor: pointer;
border: 1px solid #aaa;
text-align: center;
margin-top: -1px;
border-right: 1px solid #aaa;
background: #eff;
}
[tabs] > :hover {
color: #036;
background: #ccc;
}
[tabs] .active {
background: #80DFFF;
cursor: auto;
border-right:0px;
border-left:0px;
}
[tabs] a {
text-decoration: none;
}
</style>
<script type="text/javascript">
//<![CDATA[
window.onload = function() {
draw();
ticktack(0);
with (document.getElementById("[at]").firstChild.parentNode) {
setAttribute("href", getAttribute("href").replace("qay", "@"));
}
}
function Psns(ml) { return 'to:'+ ml + 'qay'; }
var s = 1; // scale
function ticktack(i) { // date/time as animated barcode background image
var s = Math.min(800,document.body.clientWidth)/10, bg = i?back2:back1;
bg.setAttribute('width', s*12);
bg.setAttribute('height', s*38);
bg = bg.firstElementChild;
bg.firstElementChild.setAttribute("d",toPath(datamatrix(Date().substr(0,24), true)));
bg.setAttribute('transform','scale('+s+') translate(0,37) rotate(-90)');
back1.parentNode.style.transitionTimingFunction = "cubic-bezier(0.5,"+(1-i)+",1,1)";
back2.parentNode.style.transitionTimingFunction = "cubic-bezier(0.5,"+i+",1,1)";
back1.parentNode.style.opacity = 1-i;
back2.parentNode.style.opacity = i;
setTimeout(ticktack,1000,1-i);
}
function getText() { // encode chars >127 for reader conformity
return unescape(encodeURIComponent(form.text.value)); // unicode to UTF-8
}
function draw() { // create rectangle Data Matrix as SVG path and squared as SVG squares
var text = getText();
var dm = datamatrix(text, true); // // call bar code function, return as matrix, try rectangular symbol
if (svg2.childElementCount > 0) svg2.removeChild(svg2.lastElementChild); // delete old drawing
if (dm.length == 0) { s = 2; tdm.innerHTML="Message too long for Data Matrix."; }
else {
tdm.innerHTML = 'Data Matrix '+dm[1].length+'x'+dm.length+' cells '+(form.bg.checked ? '(GIF)' : '(SVG path)');
s = Math.floor((400+dm[1].length)/(dm[1].length+(form.bg.checked ? 5 : 1))); // scale
svg.parentNode.setAttribute('height', s*dm.length+5);
svg.parentNode.setAttribute('width', form.bg.checked ? 0 : s*dm[1].length+5);
svg.parentNode.setAttribute('title', "Content: "+text);
dmg1.src = toGif(dm,s,3,2);
dmg1.style.width = form.bg.checked ? 'auto' : 0;
dmg1.style.visibility = form.bg.checked ? 'visible' : 'hidden';
dmg1.title = "Content: "+text;
var g = toPath(form.bg.checked ? [[0]] : dm); // convert image to SVG path
svg.firstElementChild.setAttribute('transform', 'scale(' + s + ')');
svg.firstElementChild.setAttribute("d",g);
if (dm[1].length > 4+dm.length) { // different width/height: draw both square and rectangular
g = document.createElementNS('http://www.w3.org/2000/svg','g');
dm = datamatrix(text); // (optional) false = square symbol
for (var y = 0; y < dm.length; y++)
for (var x = 0; x < dm[y].length; x++)
if (dm[y][x]) { // setCell as SVG rectangle
var r = document.createElementNS('http://www.w3.org/2000/svg','rect');
r.x.baseVal.value = x; r.y.baseVal.value = y;
r.rx.baseVal.value = r.ry.baseVal.value = 0.1;
r.width.baseVal.value = r.height.baseVal.value = 0.9;
g.appendChild(r);
}
dmg2.src = toGif(datamatrix(text),s,3,2);
dmg2.style.width = form.bg.checked ? 'auto' : 0;
dmg2.title = "Content: "+text;
g.setAttribute('transform', 'scale(' + s + ')'); // same cell size as rect
svg2.parentNode.setAttribute('width', form.bg.checked ? 0 : dm[1].length*s+5);
svg2.parentNode.setAttribute('visibility', !form.bg.checked ? 'visible' : 'hidden');
svg2.parentNode.setAttribute('height', dm.length*s+5);
svg2.parentNode.setAttribute('title', "Content: "+text);
tdm2.innerHTML = 'Data Matrix '+dm[1].length+'x'+dm.length+' cells '+(form.bg.checked ? '(GIF)' : '(SVG squares)');
svg2.appendChild(g);
} else {
tdm2.innerHTML = "";
dmg2.style.width = 0;
}
}
draw_qr();
draw_aztec();
draw_pdf();
t128.innerHTML = toHtml([code128(text.substr(0,30))],[s/4|0,50]); // draw Code 128
}
function draw_pdf() {
var text = getText(), t = 'f';
var level = parseInt(document.pdf.level.value);
var ratio = parseInt(document.pdf.ratio.value);
if (document.pdf.micro.checked) t = "m";
else if (document.pdf.compact.checked) t = "c";
var pdf = pdf417(text,level,(ratio/32|0)+1,0,t); // call bar code function, return as matrix
if (pdf.length > 0)
PDF417.src = toGif(pdf,[s/3|0,s],form.bg.checked ? 3 : 0,form.bg.checked ? 2 : 0); // draw PDF417
}
function draw_qr() { // create QR barcode as GIF image
for (var i = 0; i < 4; i++) if (qr.qual[i].checked) break; // get quality level
var r = quickresponse(form.text.value,document.qr.qual[i].value,qr.micro.checked?-3:1);
if (r.length == 0) { alert("Message too long for QR!"); return; }
tqr.innerHTML = (r.length < 20 ? 'Micro QR Code ' : 'QR Code ')+r.length+'x'+r.length+' cells (GIF)';
gif.src = toGif(r,s,form.bg.checked ? 3 : 0,form.bg.checked ? 2 : 0); // BG transparent/white
gif.title = "Content: "+getText();
}
function draw_aztec() { // create Aztec barcode as canvas
var cvs = document.createElement('canvas'), ctx = cvs.getContext('2d');
cvs.width = cvs.height = 900; ctx.fillStyle = 'white';
if (form.bg.checked) ctx.fillRect(0,0,700,700); // white BG
var b = form.bg.checked ? 20 : 0; // padding
var dm = aztec(getText(),isNaN(fazt.sec.value)?23:fazt.sec.value); // setCell of array
var i = dm.length;
for (var y = 0; y < i; y++)
for (var x = 0; x < dm[y].length; x++)
if (dm[y][x]) ctx.rect(x*s+b,y*s+b,s,s); // setCell as SVG rectangle
if (dm.length == 0) { alert("Message too long for Aztec!"); return; }
tazt.innerHTML = 'Aztec '+(i < 12 ? 'rune ' : i < 28 ? 'compact ' : '')+i+'x'+i+' cells (PNG)';
ctx.fillStyle = "#000"; ctx.fill();
var tcvs = document.createElement('canvas'); // copy canvas
tcvs.width = tcvs.height = i*s+2*b; // to crop image
tcvs.getContext('2d').drawImage(cvs,0,0);
png.src = tcvs.toDataURL(); // set barcode image
png.title = "Content: "+getText();
}
//]]>
</script>
<title>Barcode</title>
</head>
<body>
<div tabs class="bc"><a href="bresenham.html"><div>Bresenham</div></a>
<div class="active">Barcode</div><a href="blurring.html"><div >Blurring</div></a></div>
<div style="position:absolute;z-index:-1;opacity:0;transition: opacity 0.5s ease-in-out;">
<svg id=back1>
<g style="fill:#b4f2d4;"><path fill-rule="evenodd" /></g>
<desc>date/time animated barcode background</desc>
</svg>
</div>
<div style="position:absolute;z-index:-1;opacity:0;transition: opacity 0.5s ease-in-out;">
<svg id=back2>
<g style="fill:#b4f2d4;"><path fill-rule="evenodd" /></g>
<desc>date/time animated barcode background</desc>
</svg>
</div>
<table>
<tr>
<td>
<h2 style="margin-top:3em">2D Barcode Generator</h2>
</td>
</tr>
<tr>
<td>
<p>Data Matrix, QR, Aztec and Code 128 barcode creation by open source <b>JavaScript</b> program or <b>office</b> macros.</p>
<p>This page encourages you to design your own 2D barcode creator.</p>
<h3>Message to encode</h3>
<form name="form">
<p><textarea name="text" cols="80" rows="4" title="type barcode text here" onkeyup="draw()">TYPE TEXT HERE</textarea></p>
<p><div id="remark" style="text-align: center">
The barcode generator is pure client-side <a href="barcode.js" title="source code">JavaScript</a> without any dependencies.
</div></p>
<p style="text-align: center;">You can also view a very simple page of <a href="easybar.html">Easy Barcode Generation</a>.</p>
<p><div id="remark" style="text-align: center">
<label><input type="checkbox" name="bg" title="toggle view" onclick="draw()" /> simple layout for copying barcode images.</label>
</div></p>
</form>
</td>
</tr>
</table>
<table cellpadding="20">
<tr>
<td>
<h3>Data Matrix</h3>
<p style="text-align: center;"><img id="dmg1" class="bar" />
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<desc>Data Matrix barcode</desc>
<g id=svg filter="url(#filter)" class=bar transform="translate(3,0)"><path fill-rule="evenodd" /></g>
<defs><filter id=filter ><feGaussianBlur in="SourceAlpha" stdDeviation=1 result="blur"/>
<feOffset in="blur" dx=-1 dy=1 result="offset"/>
<feSpecularLighting in="blur" surfaceScale=1 specularConstant=.8 specularExponent=10 lighting-color=#acd result="spec">
<fePointLight x=400 y=-20 z=200 /></feSpecularLighting>
<feComposite in="spec" in2="SourceAlpha" operator="in" result="comp"/>
<feComposite in="SourceGraphic" in2="comp" operator="arithmetic" k2=1 k3=1 result="lit"/>
<feMerge><feMergeNode in="offset"/><feMergeNode in="lit"/></feMerge>
</filter></defs></svg></p>
<p id="tdm" style="text-align: center;">Data Matrix</p><noscript><b>! please enable javascript !</b></noscript>
</td>
<td style="text-align:center;vertical-align:bottom">
<p style="text-align: center;"><img id="dmg2" class="bar" />
<svg title="SVG rect" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<desc>Data Matrix bar code</desc>
<g id=svg2 filter="url(#filter2)" class=bar><path></path></g>
<defs><filter id=filter2 ><feGaussianBlur in="SourceAlpha" stdDeviation=1 result="blur"/>
<feOffset in="blur" dx=1 dy=1 result="offset"/>
<feSpecularLighting in="blur" surfaceScale=1 specularConstant=.8 specularExponent=10 lighting-color=#acd result="spec">
<fePointLight x=-10 y=-20 z=200 /></feSpecularLighting>
<feComposite in="spec" in2="SourceAlpha" operator="in" result="comp"/>
<feComposite in="SourceGraphic" in2="comp" operator="arithmetic" k2=1 k3=1 result="lit"/>
<feMerge><feMergeNode in="offset"/><feMergeNode in="lit"/></feMerge>
</filter></defs></svg></p>
<p id="tdm2" style="text-align: center;">Data Matrix</p>
</td>
</tr>
<tr>
<td align=center>
<img id="gif" class="bar" alt="QR barcode" style="padding:5px" />
<p id="tqr" style="text-align: center;">QR barcode</p>
</td>
<td valign="top">
<h3 style="text-align:left;text-indent:40px;">QR Code</h3>
<form name="qr">
<p>quality level:</p>
<p><label><input type="radio" name="qual" value="A" title="auto" checked="checked" onclick="draw_qr()" /> auto</label></p>
<p><label><input type="radio" name="qual" value="L" title="low" onclick="draw_qr()" /> L 7% (low)</label></p>
<p><label><input type="radio" name="qual" value="M" title="medium" onclick="draw_qr()" /> M 15% (medium)</label></p>
<p><label><input type="radio" name="qual" value="Q" title="quartile" onclick="draw_qr()" /> Q 25% (quartile)</label></p>
<p><label><input type="radio" name="qual" value="H" title="high" onclick="draw_qr()" /> H 30% (high)</label></p>
<p><br /></p>
<p><label><input type="checkbox" name="micro" title="micro QR" onclick="draw_qr()" /> micro QR</label></p>
</form>
</td>
</tr>
<tr>
<td align=center>
<div style="overflow:hidden;"><img id="png" class="bar" alt="Aztec barcode" /></div>
<p id="tazt" style="text-align: center;">Atzec</p>
</td>
<td style="vertical-align:top">
<h3 style="text-align:left;text-indent:40px;">Aztec</h3>
<form id="fazt">
<p>security <small>(2-90%)</small>:</p>
<p> <input name="sec" type="text" title="percentage of checkwords" size="2" maxlength="2" value="23"
onkeyup="draw_aztec()" /> %</p>
</form>
</td>
</tr>
<tr>
<td colspan=2>
<h3>Code 128</h3>
<p id='t128' style="text-align: center;"></p>
<p id="p128" style="text-align: center;">Code128 as html/css</p>
</td>
</tr>
<tr>
<td colspan=2>
<h3>PDF417</h3>
<form onchange="draw_pdf()" name="pdf" style="text-align: center; text-indent: 0;">
<label style=" padding: 10px; ">Level</label>
<select id="level" name="level" >
<option value="auto">auto</option><option value="0">0</option><option value="1">1</option>
<option value="2">2</option><option value="3">3</option><option value="4">4</option>
<option value="5">5</option><option value="6">6</option><option value="7">7</option>
</select>
<label style=" padding: 20px; "></label>
<label><input type="checkbox" name="compact" id="compact" value="c" title="compact" onclick="document.pdf.micro.checked=false;draw()" /> Compact PDF417</label>
<label style=" padding: 40px; "><input type="checkbox" name="micro" id="micro" value="m" title="micro" onclick="document.pdf.compact.checked=false;draw()" /> Micro PDF417</label>
<input type="range" id="ratio" value="50"> Aspect ratio
</form><br>
<p style="text-align: center; text-indent: 0; "><img id='PDF417' class="bar" alt="PDF417 barcode" /></p>
</td>
</tr>
</table>
<h3 style="text-align:left;text-indent:40px;">Barcode Library</h3>
<p>The program creates 2D barcode symbols of Data Matrix, Aztec, PDF417 and QR code as
<a href= "https://en.wikipedia.org/wiki/Scalable_Vector_Graphics">vector graphic</a>.</p>
<p>The top left symbol is created by a minimized path shape, the top right (if present) by many single squares.</p>
<p>The QR barcode in the middle is a transparent GIF image and the bottom Aztec barcode is a canvas PNG.</p>
<p>An additional SVG filter is applied on the first barcode.</p>
<p>The blocks (cells) of all symbols are equal in size except of the linear barcodes Code128 and PDF417.</p>
<h4>Features</h4>
<p><b style="color:green">+</b> Creates Data Matrix in square or rectangular pattern.</p>
<p><b style="color:green">+</b> Creates QR or micro QR barcode symbols.</p>
<p><b style="color:green">+</b> Creates Aztec, compact Aztec or Aztec rune barcodes.</p>
<p><b style="color:green">+</b> Creates PDF417, compact PDF417 or micro PDF417 barcodes.</p>
<p><b style="color:green">+</b> HTML, canvas, Scalable Vector Graphic or PNG/GIF pixel image output.</p>
<p><b style="color:green">+</b> One short and compact program for all barcodes.</p>
<p><b style="color:green">+</b> Available for office programs Excel, Access and Calc.</p>
<p><b style="color:green">+</b> Automatic mode encoding and barcode size selection.</p>
<p><b style="color:green">+</b> Algorithm could be easily adapted to individual requirements.</p>
<p><b style="color:green">+</b> Encodes all unicode chars as utf-8.</p>
<p><b style="color:green">+</b> Free and open-source software program (MIT license).</p>
<p><b style="color:green">+</b> Smallest possible barcode symbol for all kind of data.</p>
<p><b style="color:darkred">–</b> no handling of special codes like
<a href= "https://en.wikipedia.org/wiki/GS1-128">FNC1</a>, <a href= "https://en.wikipedia.org/wiki/Extended_Channel_Interpretation">ECI</a> or structure append.</p>
<h4>Advantages</h4>
<p><i>Universal:</i> runs on every browser, operating system or platform.</p>
<p><i>Flexible:</i> outputs vector or pixel images in adjustable design.</p>
<p><i>Adaptable:</i> modify or convert simple source code to your own desire.</p>
<h3 style="text-align:left;text-indent:40px;color:navy">Download V2.2</h3>
<p>The barcode program is open source software at <a href="https://github.com/zingl/2D-Barcode/">GitHub</a> (MIT license).</p>
<p>The algorithm is available as <b>Jasvascript</b>: <a href="barcode.js">barcode.js</a>.</p>
<p>For <a href="https://office.microsoft.com/">MS Office</a> it is available as <b>Excel</b>:
<a href="https://github.com/zingl/2D-Barcode/raw/master/barcode.xlsm">barcode.xlsm</a> and <b>Access</b>:
<a href="https://github.com/zingl/2D-Barcode/raw/master/barcode.accdb">barcode.accdb</a>.</p>
<p>And for <a href="https://www.libreoffice.org/">Open/LibreOffice</a> it is available as <b>Calc</b>
template: <a href="https://github.com/zingl/2D-Barcode/raw/master/barcode.oxt">barcode.oxt</a>
and example sheet: <a href="https://github.com/zingl/2D-Barcode/raw/master/barcode.ods">barcode.ods</a>.</p>
<p>Install the template in Calc by opening it or: Tools > Extension Manager > Add </p>
<p>Go do something cool with it.</p>
<h3 style="text-align:left;text-indent:40px;color:navy;">Information about barcodes</h3>
<p><a href="https://grandzebu.net/informatique/codbar-en/codbar.htm">Grandzebu Accueil, Open Barcodes Project</a></p>
<p><a href="https://barmatrixcode.de/">BarMatrixCode The Bar- and Matrixcode information</a> (german)</p>
<h4>Data Matrix</h4>
<p><a href="https://en.wikipedia.org/wiki/Data_Matrix">Wikipedia Data Matrix</a></p>
<p><a href="https://www.iso.org/iso/catalogue_detail.htm?csnumber=44230">ISO/IEC 16022:2006,
Data Matrix barcode symbology specification <small>(CHF 198.-)</small></a></p>
<p><a href="https://barcode-coder.com/en/datamatrix-specification-104.html">Barcode Coder, Data Matrix specification</a></p>
<p><a href="https://www.ams.org/samplings/feature-column/fcarc-data-matrix">American Mathematical Society, Crypto Graphics</a></p>
<h4>QR Code</h4>
<p><a href="https://en.wikipedia.org/wiki/QR_code">Wikipedia QR code</a></p>
<p><a href="https://www.qrcode.com/en/index.html">Denso Wave, the Inventor of QR Code</a></p>
<p><a href="https://www.iso.org/iso/catalogue_detail?csnumber=43655">ISO/IEC 18004:2006,
QR Code 2005 barcode symbology specification <small>(CHF 198.-)</small></a></p>
<p><a href="https://en.wikiversity.org/wiki/Reed%E2%80%93Solomon_codes_for_coders">Wikiversity, Reed-Solomon codes for coders</a></p>
<p><a href="https://www.thonky.com/qr-code-tutorial/">Thonky QR Code Tutorial</a></p>
<p><a href="https://www.pclviewer.com/QRCODE.html">RedTitan</a></p>
<h4>Aztec</h4>
<p><a href="https://en.wikipedia.org/wiki/Aztec_Code">Wikipedia Aztec code</a></p>
<p><a href="https://www.iso.org/iso/iso_catalogue/catalogue_tc/catalogue_detail.htm?csnumber=41548">ISO/IEC 24778:2008,
Aztec Code barcode symbology specification <small>(CHF 158.-)</small></a></p>
<p><a href="https://web.archive.org/web/20090912225404/http://www.ritservice.ru/products/aps/aztece.asp">Rit Service (web archive)</a></p>
<h4>PDF417</h4>
<p><a href="https://en.wikipedia.org/wiki/PDF417">Wikipedia PDF417 barcode</a></p>
<p><a href="https://www.iso.org/standard/65502.html">ISO/IEC 15438:2015,
PDF417 bar code symbology specification <small>(CHF 198.-)</small></a></p>
<h4>Programs</h4>
<p><a href="https://bwipp.terryburton.co.uk/">Barcode Writer in Pure PostScript</a></p>
<p><a href="http://zint.org.uk/">Zint/OkapiBarcode Barcode Generator</a></p>
<hr noshade="noshade" size="1" />
<p>Copyright © Alois Zingl, Austria, Email: <script type="text/javascript">
//<![CDATA[
var r = ".at";
document.write('<a title="Send mail!" id="[at]" href="m' + 'ail'+ Psns('alois.zingl') +
"gmx" + r + '"><img align="absbottom" src="email.gif" border="0"><\/a>');
//]]>
</script><noscript><img align="absbottom" src="email.gif" /></noscript>, last update June 2021.</p>
</body>
</html>