From 5c2295e1036d2cd2166f67e62c845633a9053049 Mon Sep 17 00:00:00 2001 From: Christoph Oberhofer Date: Sun, 22 May 2016 23:00:51 +0200 Subject: [PATCH] Added file-input example --- example/css/styles.css | 4 ++ example/file-input/index.html | 120 ++++++++++++++++++++++++++++++++++ example/file-input/index.js | 41 ++++++++++++ 3 files changed, 165 insertions(+) create mode 100644 example/file-input/index.html create mode 100644 example/file-input/index.js diff --git a/example/css/styles.css b/example/css/styles.css index 60929de..47806d7 100644 --- a/example/css/styles.css +++ b/example/css/styles.css @@ -75,6 +75,10 @@ top: 0; } +input[type=file] { + display: none; +} + /* line 16, ../sass/_viewport.scss */ .controls fieldset { border: none; diff --git a/example/file-input/index.html b/example/file-input/index.html new file mode 100644 index 0000000..b88551d --- /dev/null +++ b/example/file-input/index.html @@ -0,0 +1,120 @@ + + + + + + + index + + + + + + + + + + +
+
+

QuaggaJS

+

An advanced barcode-scanner written in JavaScript

+
+
+
+

Scan barcode to input-field

+

Click the button next to the input-field + to select a file or snap a picture

+
+
+
+ + + + +
+
+
+

This example demonstrates the following features: +

+

+
+

Source

+
+ 
+                    
+var Quagga = window.Quagga;
+var App = {
+    _scanner: null,
+    init: function() {
+        this.attachListeners();
+    },
+    decode: function(src) {
+        Quagga
+            .decoder({readers: ['ean_reader']})
+            .locator({patchSize: 'medium'})
+            .fromImage(src, {size: 800})
+            .toPromise()
+            .then(function(result) {
+                document.querySelector('input.isbn').value = result.codeResult.code;
+            })
+            .catch(function() {
+                console.log("Not found!");
+            })
+            .then(function() {
+                this.attachListeners();
+            }.bind(this));
+    },
+    attachListeners: function() {
+        var self = this;
+        document.querySelector('.input-field input + .button.scan')
+            .addEventListener("click", function onClick(e) {
+                e.preventDefault();
+                e.target.removeEventListener("click", onClick);
+                document.querySelector('.input-field input[type=file]').click();
+            });
+        document.querySelector('.input-field input[type=file]')
+            .addEventListener("change", function onChange(e) {
+                e.preventDefault();
+                e.target.removeEventListener("change", onChange);
+                if (e.target.files && e.target.files.length) {
+                    self.decode(URL.createObjectURL(e.target.files[0]));
+                }
+            });
+    }
+};
+App.init();
+                    
+
+
+
+ 
+                    
+<form>
+    <div class="input-field">
+        <label for="isbn_input">EAN:</label>
+        <input id="isbn_input" class="isbn" type="text" />
+        <button type="button" class="icon-barcode button scan">&nbsp;</button>
+        <input type="file" id="file" capture/>
+    </div>
+</form>
+                    
+
+
+
+
+ + + + + + + diff --git a/example/file-input/index.js b/example/file-input/index.js new file mode 100644 index 0000000..3479aed --- /dev/null +++ b/example/file-input/index.js @@ -0,0 +1,41 @@ +var Quagga = window.Quagga; +var App = { + _scanner: null, + init: function() { + this.attachListeners(); + }, + decode: function(src) { + Quagga + .decoder({readers: ['ean_reader']}) + .locator({patchSize: 'medium'}) + .fromImage(src, {size: 800}) + .toPromise() + .then(function(result) { + document.querySelector('input.isbn').value = result.codeResult.code; + }) + .catch(function() { + console.log("Not found!"); + }) + .then(function() { + this.attachListeners(); + }.bind(this)); + }, + attachListeners: function() { + var self = this; + document.querySelector('.input-field input + .button.scan') + .addEventListener("click", function onClick(e) { + e.preventDefault(); + e.target.removeEventListener("click", onClick); + document.querySelector('.input-field input[type=file]').click(); + }); + document.querySelector('.input-field input[type=file]') + .addEventListener("change", function onChange(e) { + e.preventDefault(); + e.target.removeEventListener("change", onChange); + if (e.target.files && e.target.files.length) { + self.decode(URL.createObjectURL(e.target.files[0])); + } + }); + } +}; +App.init();