UnknownObject/quaggaJS
1
0
Fork 0
mirror of https://github.com/serratus/quaggaJS.git synced 2026-08-12 21:21:42 +08:00
Code Issues Packages Projects Releases Wiki Activity

Fixed file-input example; fixed styling

Browse Source
This commit is contained in:
Christoph Oberhofer
2016-07-17 22:27:59 +02:00
parent cb8502da30
commit e42fc6d221
6 changed files with 68 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files
example/css/styles.css
+14
View File
@@ -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
+3 -1
View File
@@ -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
+40 -20
View File
@@ -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
+6 -1
View File
@@ -68,8 +68,13 @@ export default {
}
_canvas.ctx.pattern = _canvas.dom.pattern.getContext("2d");
if ($debug) {
_canvas.dom.overlay = document.querySelector("canvas.drawingBuffer");
if (_canvas.dom.overlay) {
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
+1 -1
View File
@@ -73,7 +73,7 @@ function fromConfig(config) {
scanner.registerResultCollector(resultCollector);
},
getCanvas() {
return scanner.canvas;
return scanner.canvas.dom.image;
},
};
}
src/scanner.js
+2 -16
View File
@@ -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;
}
}