Instantly share code, notes, and snippets.

Embed
What would you like to do?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Shape Detection API Demo</title>
</head>
<body>
<img hidden id="image" src="qr.png">
<canvas id="canvas"></canvas>
<script>
window.onload = function () {
var image = document.getElementById('image');
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext("2d");
canvas.width = image.width;
canvas.height = image.height;
ctx.drawImage(image,
0, 0, image.width, image.height,
0, 0, canvas.width, canvas.height);
const scale = canvas.width / image.width;
if (window.BarcodeDetector == undefined) {
console.error('Barcode Detection not supported');
return;
}
var barcodeDetector = new BarcodeDetector();
barcodeDetector.detect(image)
.then(barcodes => {
var ctx = document.getElementById('canvas').getContext("2d");
ctx.beginPath();
ctx.lineWidth = 2;
ctx.strokeStyle = "red";
for (var i = 0; i < barcodes.length; i++) {
ctx.rect(Math.floor(barcodes[i].boundingBox.x * scale),
Math.floor(barcodes[i].boundingBox.y * scale),
Math.floor(barcodes[i].boundingBox.width * scale),
Math.floor(barcodes[i].boundingBox.height * scale));
ctx.stroke();
}
ctx.closePath();
}).catch((e) => {
console.error(e);
})
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment