From 92dcaa018ac1665fd6493ed91bfc8763ca5816cd Mon Sep 17 00:00:00 2001 From: Christoph Oberhofer Date: Fri, 27 Mar 2015 20:56:04 +0100 Subject: [PATCH] Added File-input examples --- example/file_input.html | 62 ++++++++++++++++++++++++++++++++++ example/file_input.js | 75 +++++++++++++++++++++++++++++++++++++++++ 2 files changed, 137 insertions(+) create mode 100644 example/file_input.html create mode 100644 example/file_input.js diff --git a/example/file_input.html b/example/file_input.html new file mode 100644 index 0000000..3c70071 --- /dev/null +++ b/example/file_input.html @@ -0,0 +1,62 @@ + + + + + + + index + + + + + + + + +
+
+

QuaggaJS

+ +

An advanced barcode-scanner written in JavaScript

+
+
+
+

Working with file-input

+ +

This example let's you select an image from your local filesystem. + QuaggaJS then tries to decode the barcode using + the preferred method (Code128 or EAN). + There is no server interaction needed as the + file is simply accessed through the File API.

+ +

This also works great on a wide range of mobile-phones where the camera + access through getUserMedia is still very limited.

+ +
+ +
+ + + + + + +
+
+
+
    +
    +
    +
    +
    + + + + + + \ No newline at end of file diff --git a/example/file_input.js b/example/file_input.js new file mode 100644 index 0000000..720e00b --- /dev/null +++ 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 = $('

    • '); + $node.find("img").attr("src", canvas.toDataURL()); + $node.find("h4.code").html(code); + $("#result_strip ul.thumbnails").prepend($node); + }); +}); \ No newline at end of file