2D-Barcode/easybar.html at master · zingl/2D-Barcode · GitHub

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
<!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8" />
  <meta name="description" content="Simple barcode generation demo.">
  <title>Barcode</title>
  <script type="text/javascript" src="barcode.js"></script>
  <script type="text/javascript">
	function barcode() {
		var text = unescape(encodeURIComponent(form.text.value)); // unicode chars to utf-8

		// DataMatrix in SVG
		path.setAttribute('d',toPath(datamatrix(text))); // matrix as svg path
		svg.setAttribute('style','height:'+svg.getBBox().height+'px'); // scale height

		// QRCode in GIF
		gif.src = toGif(quickresponse(text),6); // matrix as gif

		// Aztec in canvas
		var ctx = canvas.getContext('2d'), mat = aztec(text);
		canvas.height = mat.length*6; ctx.scale(6,6); // scale height
		ctx.fill(new Path2D(toPath(mat))); // matrix as canvas

		// PDF417 in HTML/CSS
		pdf.innerHTML = toHtml(pdf417(text),[4,10]); // matrix as HTML/CSS

		// Code128 in HTML/CSS
		c128.innerHTML = toHtml([code128(text)],[3,60]); // array to matrix for toHtml
	}
  </script>
</head>
<body onload="barcode()">
	<h1>Easy Barcode Generation</h1>

	<p>Check this page source to see how simple barcode generation is!</p>

	<h3>Message to encode:</h3>
	<form name="form">
	  <p><textarea name="text" cols="60" rows="6" title="type barcode text here" onkeyup="barcode()">TYPE TEXT HERE</textarea></p>
	</form>

	<h2>Data Matrix</h2>
	as SVG: <svg id="svg"><path id="path" transform="scale(6)" /></svg>

	<h2>QR Code</h2>
	as GIF: <img id="gif" />

	<h2>Aztec</h2>
	as Canvas: <canvas id="canvas"></canvas>

	<h2>PDF417</h2>
	as HTML: <span id="pdf"></span>

	<h2>Code128</h2>
	<p id="c128"></p>

	<p>&copy; June 2021 <a href="https://zingl.github.io/">zingl.github.io</a></p>
</body>
</html>