@dsbtek/barcode-detector
Version:
A TypeScript library for real-time PDF417 barcode scanning.
78 lines (72 loc) • 2.82 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Barcode Detector Test</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
}
#canvas {
border: 1px solid #ccc;
margin-top: 10px;
}
</style>
</head>
<body>
<h1>Test Barcode Detector</h1>
<input type="file" id="fileInput" accept="image/*" />
<canvas id="canvas"></canvas>
<p id="result"></p>
<script src="dist/bundle.js"></script>
<script>
document
.getElementById('fileInput')
.addEventListener('change', async (event) => {
const file = event.target.files[0];
if (!file) {
console.log('No file selected');
return;
}
const img = new Image();
img.src = URL.createObjectURL(file);
img.onload = async () => {
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
canvas.width = img.width;
canvas.height = img.height;
ctx.drawImage(img, 0, 0);
const imageData = ctx.getImageData(
0,
0,
canvas.width,
canvas.height,
);
try {
const result = await BarcodeDetector.scanBarcode(
imageData,
);
console.log('Scan result:', result);
document.getElementById(
'result',
).textContent = `Barcode content: ${
result || 'No barcode detected'
}`;
} catch (error) {
console.error(
'Error during barcode scanning:',
error,
);
document.getElementById('result').textContent =
'Error scanning barcode';
}
};
img.onerror = (error) => {
console.error('Error loading image:', error);
};
});
</script>
</body>
</html>