Fixed file-input example; fixed styling

example/css/styles.css

@@ -248,4 +248,18 @@ footer {
 .container {
   margin: 20px auto;
   padding: 10px;
+  max-width: 640px;
+}
+
+#interactive.viewport {
+    position: relative;
+}
+
+#interactive.viewport > canvas, #interactive.viewport > video {
+    max-width: 100%;
+    width: 100%;
+}
+
+canvas.drawing {
+    position: absolute;
 }

example/file_input.html

@@ -95,7 +95,9 @@
     <div id="result_strip">
         <ul class="thumbnails"></ul>
     </div>
-    <div id="interactive" class="viewport"></div>
+    <div id="interactive" class="viewport">
+        <canvas class="drawing" />
+    </div>
     <div id="debug" class="detection"></div>
 </section>
 <footer>

example/file_input.js

@@ -1,6 +1,7 @@
 $(function() {
     var App = {
         init: function() {
+            this.overlay = document.querySelector('#interactive canvas.drawing');
             App.attachListeners();
         },
         attachListeners: function() {
@@ -8,14 +9,14 @@ $(function() {
 
             $(".controls input[type=file]").on("change", function(e) {
                 if (e.target.files && e.target.files.length) {
-                    App.decode(URL.createObjectURL(e.target.files[0]));
+                    App.decode(e.target.files[0]);
                 }
             });
 
             $(".controls button").on("click", function(e) {
                 var input = document.querySelector(".controls input[type=file]");
                 if (input.files && input.files.length) {
-                    App.decode(URL.createObjectURL(input.files[0]));
+                    App.decode(input.files[0]);
                 }
             });
 
@@ -52,11 +53,27 @@ $(function() {
             $(".controls .reader-config-group").off("change", "input, select");
             $(".controls button").off("click");
         },
-        decode: function(src) {
-            var self = this,
-                config = $.extend({}, self.state, {src: src});
-
-            Quagga.decodeSingle(config, function(result) {});
+        decode: function(file) {
+            this.detachListeners();
+            console.log("decode...");
+            var scanner = Quagga
+                .fromConfig(this.state)
+                .fromSource(file, {size: this.state.inputStream.size});
+            scanner
+                .toPromise()
+                .then(function(result) {
+                    console.log(result);
+                    addToResults(scanner, result);
+                    return result;
+                })
+                .catch(function(result) {
+                    console.log('Not found', result);
+                    return result;
+                })
+                .then(function(result) {
+                    drawResult(scanner, result);
+                    this.attachListeners();
+                }.bind(this));
         },
         setState: function(path, value) {
             var self = this;
@@ -142,45 +159,48 @@ $(function() {
         };
     }
 
-    Quagga.onProcessed(function(result) {
-        var drawingCtx = Quagga.canvas.ctx.overlay,
-            drawingCanvas = Quagga.canvas.dom.overlay,
-            area;
+    function drawResult(scanner, result) {
+        var processingCanvas = scanner.getCanvas(),
+            canvas = App.overlay,
+            ctx = canvas.getContext("2d");
+
+        canvas.setAttribute('width', processingCanvas.getAttribute('width'));
+        canvas.setAttribute('height', processingCanvas.getAttribute('height'));
 
         if (result) {
             if (result.boxes) {
-                drawingCtx.clearRect(0, 0, parseInt(drawingCanvas.getAttribute("width")), parseInt(drawingCanvas.getAttribute("height")));
+                ctx.clearRect(0, 0, parseInt(canvas.getAttribute("width")), parseInt(canvas.getAttribute("height")));
                 result.boxes.filter(function (box) {
                     return box !== result.box;
                 }).forEach(function (box) {
-                    Quagga.ImageDebug.drawPath(box, {x: 0, y: 1}, drawingCtx, {color: "green", lineWidth: 2});
+                    Quagga.ImageDebug.drawPath(box, {x: 0, y: 1}, ctx, {color: "green", lineWidth: 2});
                 });
             }
 
             if (result.box) {
-                Quagga.ImageDebug.drawPath(result.box, {x: 0, y: 1}, drawingCtx, {color: "#00F", lineWidth: 2});
+                Quagga.ImageDebug.drawPath(result.box, {x: 0, y: 1}, ctx, {color: "#00F", lineWidth: 2});
             }
 
             if (result.codeResult && result.codeResult.code) {
-                Quagga.ImageDebug.drawPath(result.line, {x: 'x', y: 'y'}, drawingCtx, {color: 'red', lineWidth: 3});
+                Quagga.ImageDebug.drawPath(result.line, {x: 'x', y: 'y'}, ctx, {color: 'red', lineWidth: 3});
             }
 
             if (App.state.inputStream.area) {
-                area = calculateRectFromArea(drawingCanvas, App.state.inputStream.area);
+                var area = calculateRectFromArea(canvas, App.state.inputStream.area);
                 drawingCtx.strokeStyle = "#0F0";
                 drawingCtx.strokeRect(area.x, area.y, area.width, area.height);
             }
-    }
-    });
+        }
+    };
 
-    Quagga.onDetected(function(result) {
+    function addToResults(scanner, result) {
         var code = result.codeResult.code,
             $node,
-            canvas = Quagga.canvas.dom.image;
+            canvas = scanner.getCanvas();
 
         $node = $('<li><div class="thumbnail"><div class="imgWrapper"><img /></div><div class="caption"><h4 class="code"></h4></div></div></li>');
         $node.find("img").attr("src", canvas.toDataURL());
         $node.find("h4.code").html(code);
         $("#result_strip ul.thumbnails").prepend($node);
-    });
+    }
 });

src/decoder/barcode_decoder.js

@@ -68,8 +68,13 @@ export default {
                 }
                 _canvas.ctx.pattern = _canvas.dom.pattern.getContext("2d");
 
-                _canvas.dom.overlay = document.querySelector("canvas.drawingBuffer");
-                if (_canvas.dom.overlay) {
+                if ($debug) {
+                    _canvas.dom.overlay = document.querySelector("canvas.drawingBuffer");
+                    if (!_canvas.dom.overlay) {
+                        _canvas.dom.overlay = document.createElement("canvas");
+                        _canvas.dom.overlay.className = "drawingBuffer";
+                        $debug.appendChild(_canvas.dom.overlay);
+                    }
                     _canvas.ctx.overlay = _canvas.dom.overlay.getContext("2d");
                 }
             }

src/quagga.js

@@ -73,7 +73,7 @@ function fromConfig(config) {
             scanner.registerResultCollector(resultCollector);
         },
         getCanvas() {
-            return scanner.canvas;
+            return scanner.canvas.dom.image;
         },
     };
 }

src/scanner.js

@@ -20,12 +20,10 @@ function createScanner() {
         _stopped,
         _canvasContainer = {
             ctx: {
-                image: null,
-                overlay: null
+                image: null
             },
             dom: {
-                image: null,
-                overlay: null
+                image: null
             }
         },
         _inputImageWrapper,
@@ -117,18 +115,6 @@ function createScanner() {
             _canvasContainer.ctx.image = _canvasContainer.dom.image.getContext("2d");
             _canvasContainer.dom.image.width = _inputStream.getCanvasSize().x;
             _canvasContainer.dom.image.height = _inputStream.getCanvasSize().y;
-
-            _canvasContainer.dom.overlay = document.querySelector("canvas.drawingBuffer");
-            if (!_canvasContainer.dom.overlay) {
-                _canvasContainer.dom.overlay = document.createElement("canvas");
-                _canvasContainer.dom.overlay.className = "drawingBuffer";
-                if ($viewport) {
-                    $viewport.appendChild(_canvasContainer.dom.overlay);
-                }
-            }
-            _canvasContainer.ctx.overlay = _canvasContainer.dom.overlay.getContext("2d");
-            _canvasContainer.dom.overlay.width = _inputStream.getCanvasSize().x;
-            _canvasContainer.dom.overlay.height = _inputStream.getCanvasSize().y;
         }
     }