You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
58 lines
1.2 KiB
58 lines
1.2 KiB
10 months ago
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
|
|
||
|
|
<title>BarcodeDetector Polyfill</title>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
|
||
|
|
<img src="example_codes/upc_e.png" id="code" />
|
||
|
|
|
||
|
|
<input
|
||
|
|
id="fileInput"
|
||
|
|
type="file"
|
||
|
|
name="image"
|
||
|
|
accept="image/*"
|
||
|
|
capture="environment"
|
||
|
|
multiple
|
||
|
|
/>
|
||
|
|
|
||
|
|
<div id="output"></div>
|
||
|
|
|
||
|
|
</body>
|
||
|
|
<script type="text/javascript" src="https://unpkg.com/@zxing/library@latest"></script>
|
||
|
|
<script src="dist/barcode-detector.umd.js"></script>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
// if (!("BarcodeDetector" in window)) {
|
||
|
|
window.BarcodeDetector = BarcodeDetectorPolyfill
|
||
|
|
// }
|
||
|
|
|
||
|
|
const fileInput = document.querySelector("#fileInput")
|
||
|
|
const output = document.querySelector("#output")
|
||
|
|
|
||
|
|
const barcodeDetector = new BarcodeDetector()
|
||
|
|
|
||
|
|
fileInput.onchange = event => {
|
||
|
|
const files = [ ...event.target.files ];
|
||
|
|
|
||
|
|
output.innerHTML = ""
|
||
|
|
|
||
|
|
files.map(async file => {
|
||
|
|
const detectedCodes = await barcodeDetector.detect(file)
|
||
|
|
|
||
|
|
const text = document.createTextNode(
|
||
|
|
JSON.stringify(detectedCodes, null, 2)
|
||
|
|
)
|
||
|
|
|
||
|
|
const pre = document.createElement("pre")
|
||
|
|
pre.appendChild(text)
|
||
|
|
|
||
|
|
output.appendChild(pre)
|
||
|
|
})
|
||
|
|
}
|
||
|
|
|
||
|
|
</script>
|
||
|
|
</html>
|