<html>
<head>
<title>QRtest</title>
</head>
<body>
<img src="test4.png" id="test">
<div id="ms"></div>
<div id="data"></div>
<canvas id="canvas" width="19" height="14"></canvas>
<div id="ms2"></div>
</body>
<script src="js/jsQR.js"></script>
<script>
let ctx;
function main () {
const img = document.querySelector('#test');
let canvas = document.createElement('canvas');
ctx = canvas.getContext('2d');
canvas.width = img.width;
canvas.height = img.height;
ctx.drawImage(img, 0, 0);
const rgba = ctx.getImageData(
0, 0, img.width, img.height
).data;
let start = +new Date();
const code = jsQR(rgba, img.width, img.height);
let ms = (+new Date()) - start;
document.querySelector('#ms').innerText = (ms + 'ms');
if (code) {
document.querySelector('#data').innerText = code.binaryData.toString();
console.log(code);
}
canvas = document.getElementById('canvas');
ctx = canvas.getContext('2d');
start = +new Date();
display(code.binaryData);
ms = (+new Date()) - start;
document.querySelector('#ms2').innerText = (ms + 'ms');
}
function display (data) {
const w = 19;
const h = 14;
let x = 0;
let y = 0;
let val;
for (let i = 0; i < data.length; i++) {
val = data[i];
x = i % w;
y = Math.floor(i / w);
//console.log(`${x},${y} = ${val}`)
ctx.fillStyle = "rgba(" + val + "," + val + "," + val + ",1.0)";
ctx.fillRect(x, y, 1, 1);
}
}
addEventListener('DOMContentLoaded', main);
</script>
</html>