diff --git a/example/file_input.js b/example/file_input.js index 3d374f4..18f37e4 100644 --- a/example/file_input.js +++ b/example/file_input.js @@ -107,9 +107,31 @@ $(function() { App.init(); + function calculateRectFromArea(canvas, area) { + var canvasWidth = canvas.width, + canvasHeight = canvas.height, + top = parseInt(area.top)/100, + right = parseInt(area.right)/100, + bottom = parseInt(area.bottom)/100, + left = parseInt(area.left)/100; + + top *= canvasHeight; + right = canvasWidth - canvasWidth*right; + bottom = canvasHeight - canvasHeight*bottom; + left *= canvasWidth; + + return { + x: left, + y: top, + width: right - left, + height: bottom - top + }; + } + Quagga.onProcessed(function(result) { var drawingCtx = Quagga.canvas.ctx.overlay, - drawingCanvas = Quagga.canvas.dom.overlay; + drawingCanvas = Quagga.canvas.dom.overlay, + area; if (result) { if (result.boxes) { @@ -128,7 +150,13 @@ $(function() { if (result.codeResult && result.codeResult.code) { Quagga.ImageDebug.drawPath(result.line, {x: 'x', y: 'y'}, drawingCtx, {color: 'red', lineWidth: 3}); } - } + + if (App.state.inputStream.area) { + area = calculateRectFromArea(drawingCanvas, App.state.inputStream.area); + drawingCtx.strokeStyle = "#0F0"; + drawingCtx.strokeRect(area.x, area.y, area.width, area.height); + } + } }); Quagga.onDetected(function(result) {