Added File-input examples

10 years ago · 92dcaa018a
parent 2f862c9e41
commit 92dcaa018a
2 changed files with 137 additions and 0 deletions
--- a/example/file_input.html
+++ b/example/file_input.html
@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8"/>
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
+
+    <title>index</title>
+    <meta name="description" content=""/>
+    <meta name="author" content="Christoph Oberhofer"/>
+
+    <meta name="viewport" content="width=device-width; initial-scale=1.0"/>
+    <link rel="stylesheet" type="text/css" href="css/styles.css"/>
+</head>
+
+<body>
+<header>
+    <div class="headline">
+        <h1>QuaggaJS</h1>
+
+        <h2>An advanced barcode-scanner written in JavaScript</h2>
+    </div>
+</header>
+<section id="container" class="container">
+    <h3>Working with file-input</h3>
+
+    <p>This example let's you select an image from your local filesystem.
+        QuaggaJS then tries to decode the barcode using
+        the preferred method (<strong>Code128</strong> or <strong>EAN</strong>).
+        There is no server interaction needed as the
+        file is simply accessed through the <a
+                href="http://www.w3.org/TR/file-upload/">File API</a>.</p>
+
+    <p>This also works great on a wide range of mobile-phones where the camera
+        access through <code>getUserMedia</code> is still very limited.</p>
+
+    <div class="controls">
+        <input type="file" capture/>
+        <fieldset class="reader-group">
+            <label>Code128</label>
+            <input type="radio" name="reader" value="code_128"/>
+            <label>EAN</label>
+            <input type="radio" name="reader" value="ean"/>
+            <label>Code39</label>
+            <input type="radio" name="reader" value="code_39" checked/>
+        </fieldset>
+    </div>
+    <div id="result_strip">
+        <ul class="thumbnails"></ul>
+    </div>
+    <div id="interactive" class="viewport"></div>
+    <div id="debug" class="detection"></div>
+</section>
+<footer>
+    <p>
+        &copy; Copyright by Christoph Oberhofer
+    </p>
+</footer>
+<script src="../src/vendor/jquery-1.9.0.min.js" type="text/javascript"></script>
+<script src="../dist/quagga.js" type="text/javascript"></script>
+<script src="file_input.js" type="text/javascript"></script>
+</body>
+</html>
--- a/example/file_input.js
+++ b/example/file_input.js
@ -0,0 +1,75 @@
+$(function() {
+    var App = {
+        init: function() {
+            App.attachListeners();
+        },
+        config: {
+            reader: "code_39",
+            length: 10
+        },
+        attachListeners: 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]));
+                }
+            });
+            
+            $(".controls .reader-group").on("change", "input", function(e) {
+                e.preventDefault();
+                App.detachListeners();
+                App.config.reader = e.target.value;
+                App.init();
+            });
+        },
+        detachListeners: function() {
+            $(".controls input[type=file]").off("change");
+            $(".controls .reader-group").off("change", "input");
+        },
+        decode: function(src) {
+            Quagga.decodeSingle({
+                decoder: {
+                    readers : [App.config.reader + '_reader']
+                },
+                locate : true,
+                src : src
+            }, function(result) {});
+        }
+    };
+    
+    App.init();
+
+    Quagga.onProcessed(function(result) {
+        var drawingCtx = Quagga.canvas.ctx.overlay,
+            drawingCanvas = Quagga.canvas.dom.overlay;
+
+        if (result) {
+            if (result.boxes) {
+                drawingCtx.clearRect(0, 0, parseInt(drawingCanvas.getAttribute("width")), parseInt(drawingCanvas.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});
+                });
+            }
+
+            if (result.box) {
+                Quagga.ImageDebug.drawPath(result.box, {x: 0, y: 1}, drawingCtx, {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.onDetected(function(result) {
+        var code = result.codeResult.code,
+            $node,
+            canvas = Quagga.canvas.dom.image;
+
+        $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);
+    });
+});