Fixed static images example

example/file_input.js

@@ -57,7 +57,7 @@ $(function() {
             this.detachListeners();
             console.log("decode...");
             var scanner = Quagga
-                .fromConfig(this.state)
+                .config(this.state)
                 .fromSource(file, {size: this.state.inputStream.size});
             scanner
                 .toPromise()

example/static_images.html

@@ -51,7 +51,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/static_images.js

@@ -1,11 +1,20 @@
 $(function() {
     var App = {
         init: function() {
+            this.overlay = document.querySelector('#interactive canvas.drawing');
             var config = this.config[this.state.decoder.readers[0].format] || this.config.default;
             config = $.extend(true, {}, config, this.state);
-            Quagga.init(config, function() {
-                App.attachListeners();
-                Quagga.start();
+
+            this.scanner = Quagga
+                .fromConfig(config);
+
+            this.scanner
+                .addEventListener("processed", drawResult.bind(this, this.scanner))
+                .addEventListener("detected", addToResults.bind(this, this.scanner));
+
+            this.scanner.start().then(() => {
+                console.log("Started");
+                this.attachListeners();
             });
         },
         config: {
@@ -37,7 +46,7 @@ $(function() {
 
             $(".controls").on("click", "button.next", function(e) {
                 e.preventDefault();
-                Quagga.start();
+                self.scanner.start();
             });
 
             $(".controls .reader-config-group").on("change", "input, select", function(e) {
@@ -89,7 +98,8 @@ $(function() {
 
             console.log(JSON.stringify(self.state));
             App.detachListeners();
-            Quagga.stop();
+            this.scanner.stop();
+            this.scanner.removeEventListener();
             App.init();
         },
         inputMapper: {
@@ -121,6 +131,7 @@ $(function() {
             inputStream: {
                 src: "../test/fixtures/code_128/"
             },
+            numOfWorkers: 1,
             decoder : {
                 readers : [{
                     format: "code_128_reader",
@@ -133,38 +144,42 @@ $(function() {
     App.init();
     window.App = App;
 
-    Quagga.onProcessed(function(result) {
-        var drawingCtx = Quagga.canvas.ctx.overlay,
-            drawingCanvas = Quagga.canvas.dom.overlay;
+    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});
             }
         }
-    });
+    };
 
-    Quagga.onDetected(function(result) {
-        var $node,
-            canvas = Quagga.canvas.dom.image,
-            detectedCode = result.codeResult.code;
+    function addToResults(scanner, result) {
+        var code = result.codeResult.code,
+            $node,
+            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(detectedCode);
+        $node.find("h4.code").html(code);
         $("#result_strip ul.thumbnails").prepend($node);
-    });
+    }
 });