Mercurial > hgrepos > Python2 > PyMuPDF

comparison mupdf-source/thirdparty/zxing-cpp/wrappers/wasm/demo_reader.html @ 2:b50eed0cc0ef upstream

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
ADD: MuPDF v1.26.7: the MuPDF source as downloaded by a default build of PyMuPDF 1.26.4. The directory name has changed: no version number in the expanded directory now.
author Franz Glasner <fzglas.hg@dom66.de>
date Mon, 15 Sep 2025 11:43:07 +0200
parents
children
comparison
equal deleted inserted replaced
1:1d09e1dec1d9 2:b50eed0cc0ef
1 <!DOCTYPE html>
2 <html>
3
4 <head>
5 <meta charset="utf-8">
6 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
7 <title>zxing-cpp/wasm reader demo</title>
8 <link rel="shortcut icon" href="#" />
9 <script src="zxing_reader.js"></script>
10 <script>
11 var zxing = ZXing().then(function(instance) {
12 zxing = instance; // this line is supposedly not required but with current emsdk it is :-/
13 });
14
15 async function readBarcodes() {
16 let format = document.getElementById("format").value;
17 let file = document.getElementById("file").files[0];
18
19 let arrayBuffer = await file.arrayBuffer();
20 let u8Buffer = new Uint8Array(arrayBuffer);
21
22 let zxingBuffer = zxing._malloc(u8Buffer.length);
23 zxing.HEAPU8.set(u8Buffer, zxingBuffer);
24 let results = zxing.readBarcodesFromImage(zxingBuffer, u8Buffer.length, true, format, 0xff);
25 zxing._free(zxingBuffer);
26
27 showResults(results);
28 showImageWithResults(file, results);
29 }
30
31 function showImageWithResults(file, results) {
32 var canvas = document.getElementById("canvas");
33 var img = new Image()
34 img.addEventListener('load', function() {
35 canvas.width = img.width;
36 canvas.height = img.height;
37 const ctx = canvas.getContext("2d");
38 ctx.drawImage(img, 0, 0);
39
40 for (let i = 0; i < results.size(); i += 1) {
41 const { position } = results.get(i);
42 // Draw outline square
43 ctx.beginPath();
44 ctx.moveTo(position.topLeft.x, position.topLeft.y);
45 ctx.lineTo(position.topRight.x, position.topRight.y);
46 ctx.lineTo(position.bottomRight.x, position.bottomRight.y);
47 ctx.lineTo(position.bottomLeft.x, position.bottomLeft.y);
48 ctx.closePath();
49 ctx.strokeStyle = "red";
50 ctx.lineWidth = 4;
51 ctx.stroke();
52
53 // Draw number inside square
54 const text = {
55 text: i + 1,
56 size: Math.abs((position.bottomRight.y - position.topLeft.y)) / 2,
57 x: (position.topLeft.x + position.bottomRight.x) / 2.0,
58 y: (position.topLeft.y + position.bottomRight.y) / 2.0,
59 };
60 ctx.fillStyle = "white";
61 ctx.font = `bold ${text.size}px sans`;
62 ctx.textAlign = "center";
63 ctx.textBaseline = "middle";
64 ctx.fillText(text.text, text.x, text.y);
65 ctx.strokeStyle = "red";
66 ctx.lineWidth = 2;
67 ctx.strokeText(text.text, text.x, text.y);
68 }
69 });
70 img.src = URL.createObjectURL(file)
71 }
72
73 function escapeTags(htmlStr) {
74 return htmlStr.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
75 }
76
77 function u8a2hex(bytes) {
78 return bytes.reduce((a, b) => a + b.toString(16).padStart(2, '0') + ' ', '');
79 }
80
81 function showResults(results) {
82 const resultsDiv = document.getElementById("results");
83 resultsDiv.innerHTML = "";
84 if (results.size() === 0) {
85 resultsDiv.innerHTML += "No " + (document.getElementById("format").value || "barcode") + " found";
86 }
87 else {
88 for (let i = 0; i < results.size(); i += 1) {
89 const { format, text, bytes, error } = results.get(i);
90 resultsDiv.innerHTML += "<li>Format: <strong>" + format + "</strong>"
91 + "<pre>" + (escapeTags(text) || '<font color="red">Error: ' + error + '</font>') + "</pre>"
92 + "<pre>" + u8a2hex(bytes) + "</pre>"
93 + "</li>";
94 }
95 }
96 }
97 </script>
98 </head>
99
100 <body style="text-align: left">
101 <h2>zxing-cpp/wasm reader demo</h2>
102 <p>
103 This is a simple demo of the wasm wrapper of <a href="https://github.com/zxing-cpp/zxing-cpp">zxing-cpp</a>
104 scanning for barcodes in image files.
105 </p>
106 <p></p>
107 <div>
108 Scan Format:
109 <select id="format" onchange='readBarcodes()'>
110 <option value="" selected="">Any</option>
111 <option value="Aztec">Aztec</option>
112 <option value="Codabar">Codabar</option>
113 <option value="Code39">Code 39</option>
114 <option value="Code93">Code 93</option>
115 <option value="Code128">Code 128</option>
116 <option value="DataMatrix">DataMatrix</option>
117 <option value="DataBar">DataBar</option>
118 <option value="DataBarExpanded">DataBarExpanded</option>
119 <option value="DataBarLimited">DataBarLimited</option>
120 <option value="DXFilmEdge">DXFilmEdge</option>
121 <option value="EAN8">EAN-8</option>
122 <option value="EAN13">EAN-13</option>
123 <option value="ITF">ITF</option>
124 <option value="PDF417">PDF417</option>
125 <option value="QRCode">QR Code</option>
126 <option value="MicroQRCode">Micro QRCode</option>
127 <option value="RMQRCode">rMQR Code</option>
128 <option value="UPCA">UPC-A</option>
129 <option value="UPCE">UPC-E</option>
130 <option value="LinearCodes">Linear Codes</option>
131 <option value="MatrixCodes">Matrix Codes</option>
132 </select>
133
134 &nbsp;&nbsp;
135
136 Image File: <input id="file" type="file" accept="image/png, image/jpeg" onchange="readBarcodes()" />
137
138 <br /><br />
139
140 <canvas id="canvas" width="640" height="480"></canvas>
141
142 <br /><br />
143
144 <ol id="results"></ol>
145
146 </div>
147 </body>
148
149 </html>