create the QR scanner canvas internally

This commit is contained in:
danimoh
2018-01-07 12:53:06 +01:00
parent ea71627d5d
commit fc96eb3cf1
4 changed files with 25 additions and 18 deletions
+1 -3
View File
@@ -25,7 +25,6 @@
<video muted autoplay playsinline id="qr-video"></video>
<canvas id="debug-canvas"></canvas>
</div>
<canvas id="qr-canvas" width="400" height="400"></canvas>
<div>
<input type="checkbox" id="debug-checkbox">
<span>Show debug image</span>
@@ -42,7 +41,6 @@
<script src="../qr-scanner-lib.min.js"></script>
<script type="text/javascript">
const video = document.getElementById('qr-video');
const canvas = document.getElementById('qr-canvas');
const debugCheckbox = document.getElementById('debug-checkbox');
const debugCanvas = document.getElementById('debug-canvas');
const debugCanvasContext = debugCanvas.getContext('2d');
@@ -60,7 +58,7 @@
// ####### Web Cam Scanning #######
const scanner = new QrScannerLib(video, canvas, result => setResult(camQrResult, result));
const scanner = new QrScannerLib(video, result => setResult(camQrResult, result));
scanner.active = true;
+8 -5
View File
@@ -1,14 +1,16 @@
class QrScannerLib {
constructor(video, canvas, onDecode) {
constructor(video, onDecode, canvasSize = QrScannerLib.DEFAULT_CANVAS_SIZE) {
this.$video = video;
this.$canvas = canvas;
this.$canvas = document.createElement('canvas');
this._onDecode = onDecode;
this.$canvas.width = canvasSize;
this.$canvas.height = canvasSize;
this._sourceRect = {
x: 0,
y: 0,
width: this.$canvas.width,
height: this.$canvas.height
width: canvasSize,
height: canvasSize
};
this.$video.addEventListener('canplay', () => this._updateSourceRect());
@@ -188,4 +190,5 @@ class QrScannerLib {
}
});
}
}
}
QrScannerLib.DEFAULT_CANVAS_SIZE = 400;
+8 -5
View File
@@ -18,16 +18,18 @@ class QrScanner extends XElement {
}
}
class QrScannerLib {
constructor(video, canvas, onDecode) {
constructor(video, onDecode, canvasSize = QrScannerLib.DEFAULT_CANVAS_SIZE) {
this.$video = video;
this.$canvas = canvas;
this.$canvas = document.createElement('canvas');
this._onDecode = onDecode;
this.$canvas.width = canvasSize;
this.$canvas.height = canvasSize;
this._sourceRect = {
x: 0,
y: 0,
width: this.$canvas.width,
height: this.$canvas.height
width: canvasSize,
height: canvasSize
};
this.$video.addEventListener('canplay', () => this._updateSourceRect());
@@ -207,4 +209,5 @@ class QrScannerLib {
}
});
}
}
}
QrScannerLib.DEFAULT_CANVAS_SIZE = 400;
+8 -5
View File
@@ -1,14 +1,16 @@
class QrScannerLib {
constructor(video, canvas, onDecode) {
constructor(video, onDecode, canvasSize = QrScannerLib.DEFAULT_CANVAS_SIZE) {
this.$video = video;
this.$canvas = canvas;
this.$canvas = document.createElement('canvas');
this._onDecode = onDecode;
this.$canvas.width = canvasSize;
this.$canvas.height = canvasSize;
this._sourceRect = {
x: 0,
y: 0,
width: this.$canvas.width,
height: this.$canvas.height
width: canvasSize,
height: canvasSize
};
this.$video.addEventListener('canplay', () => this._updateSourceRect());
@@ -188,4 +190,5 @@ class QrScannerLib {
}
});
}
}
}
QrScannerLib.DEFAULT_CANVAS_SIZE = 400;