Merge pull request zxing-js#2 from Tjieco/ITFBarcodeScanner

Itf barcode scanner
jneuhaus20 · May 3, 2018 · 509773f · 509773f
2 parents c45c3f4 + 0b8a991
commit 509773f
Show file tree

Hide file tree

Showing 8 changed files with 470 additions and 10 deletions.
diff --git a/README.md b/README.md
@@ -18,7 +18,7 @@ Multi-format 1D/2D barcode image processing library.
 | ~UPC-E~    | ~Code 93~                | ~Data Matrix~
 | ~EAN-8~    | Code 128 (_no docs_)     | ~Aztec (beta)~
 | ~EAN-13~   | ~Codabar~                | PDF 417 (_in-progress_)
-|            | ~ITF~                    | ~MaxiCode~
+|            | ITF (_in-progress_)      | ~MaxiCode~
 |            | ~RSS-14~                 |
 |            | ~RSS-Expanded~           |
 

diff --git a/docs/examples/barcode-camera/index.html b/docs/examples/barcode-camera/index.html
@@ -25,7 +25,7 @@ <h1 class="title">Scan QR Code from Video Camera</h1>
         </div>
 
         <div>
-            <video id="video" width="300" height="200" style="border: 1px solid gray"></video>
+            <video id="video" width="600" height="400" style="border: 1px solid gray"></video>
         </div>
 
         <div id="sourceSelectPanel" style="display:none">
@@ -83,7 +83,9 @@ <h1 class="title">Scan QR Code from Video Camera</h1>
     })
 
         document.getElementById('resetButton').addEventListener('click', () => {
-            codeReader.reset()
+            document.getElementById('result').textContent = '';
+            codeReader.reset();
+
         console.log('Reset.')
     })
 

diff --git a/docs/examples/barcode-image/index.html b/docs/examples/barcode-image/index.html
@@ -0,0 +1,69 @@
+<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8">
+		<meta name="viewport" content="width=device-width, initial-scale=1">
+		<meta name="author" content="Adrian Toșcă">
+		<meta name="description" content="Scan QR Code from Image with ZXing javascript library">
+		<title>ZXing | Scan barcode from Image</title>
+		<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,300italic,700,700italic">
+		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.css">
+		<link rel="stylesheet" href="//cdn.rawgit.com/milligram/milligram/master/dist/milligram.min.css">
+	</head>
+	<body>
+
+		<main class="wrapper">
+
+			<section class="container" id="demo-content">
+				<h1 class="title">Scan barcode from Image</h1>
+
+				<p>This example shows how to scan a barcode with ZXing javascript library from an image. The example decodes from the <code>src</code> in <code>img</code> tag, however is also possible to decode directly from an url without an <code>img</code> tag.</p>
+
+				<div>
+					<a class="button" id="decodeButton">Decode</a>
+				</div>
+
+				<div>
+					<img id="img" src="../img/2of5-interleaved_806002000537753383.png" style="border: 1px solid gray"></img>
+				</div>
+
+				<label>Result:</label>
+				<blockquote>
+					<p id="result"></p>
+				</blockquote>
+
+				<p>See the <a href="https://github.com/aleris/zxing-typescript/tree/master/docs/examples/qr-image/">source code</a>  for this example.</p>
+
+			</section>
+
+			<footer class="footer">
+				<section class="container">
+					<p>ZXing TypeScript Demo. Licensed under the <a target="_blank" href="https://github.com/aleris/zxing-typescript#license" title="Apache License, Version 2.0">Apache License, Version 2.0</a>.</p>
+				</section>
+			</footer>
+
+		</main>
+
+		<script type="text/javascript" src="../../../bundles/library.min.js"></script>
+        <script type="text/javascript">
+			window.addEventListener('load', function() {
+				const codeReader = new Library.BrowserBarcodeReader('video')
+				console.log('ZXing code reader initialized')
+
+				document.getElementById('decodeButton').addEventListener('click', () => {
+					const img = document.getElementById('img')
+					codeReader.decodeFromImage(img).then((result) => {
+						console.log(result)
+						document.getElementById('result').textContent = result.text
+					}).catch((err) => {
+						console.error(err)
+						document.getElementById('result').textContent = err
+					})
+					console.log(`Started decode for image from ${img.src}`)
+				})
+
+			})
+		</script>
+
+	</body>
+</html>
diff --git a/docs/index.html b/docs/index.html
@@ -32,6 +32,7 @@ <h3>QR Code Scanning Examples</h3>
                     <li><a href="examples/qr-video">Scan QR Code from Video File</a></li>
                     <li><a href="examples/qr-svg-writer">Write QR Code to SVG</a></li>
                     <li><a href="examples/barcode-camera">Scan Barcode from Video Camera</a></li>
+                    <li><a href="examples/barcode-image">Scan Barcode from Image</a></li>
                 </ul>
 
                 <p>

diff --git a/src/browser/BrowserCodeReader.ts b/src/browser/BrowserCodeReader.ts
@@ -141,8 +141,8 @@ export default class BrowserCodeReader {
     private prepareVideoElement(videoElement?: string | HTMLVideoElement) {
         if (undefined === videoElement) {
             this.videoElement = document.createElement('video');
-            this.videoElement.width = 200;
-            this.videoElement.height = 200;
+            this.videoElement.width = 640;
+            this.videoElement.height = 480;
         } else if (typeof videoElement === 'string') {
             this.videoElement = <HTMLVideoElement>this.getMediaElement(videoElement, 'video');
         } else {