65 lines
1.5 KiB
HTML
65 lines
1.5 KiB
HTML
|
<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>
|