mirror of
https://github.com/nimiq/qr-scanner.git
synced 2026-07-27 19:56:28 +00:00
create the QR scanner canvas internally
This commit is contained in:
+1
-3
@@ -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;
|
||||
|
||||
|
||||
|
||||
Vendored
+8
-5
@@ -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;
|
||||
Vendored
+8
-5
@@ -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;
|
||||
@@ -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;
|
||||
Reference in New Issue
Block a user