-
Notifications
You must be signed in to change notification settings - Fork 5
/
Copy pathindex.html
executable file
·112 lines (101 loc) · 3.46 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
<!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>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/dbr.js"></script>
<script type="text/javascript" src="https://unpkg.com/@zxing/browser@latest"></script>
<!--<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/barcode-detector.umd.js"></script>-->
<script src="dist/barcode-detector.umd.js"></script>
<style>
.modal-window {
display: none;
position: absolute;
left: 50%;
transform: translateX(-50%);
z-index: 99999;
background: #fff;
padding: 20px;
border: thick double black;
border-radius: 5px;
font-family: sans-serif;
top: 50px;
}
.modal-window.active {
display: block;
}
</style>
</head>
<body>
Detect an Image: <input id="fileInput" type="file"/>
<img id="selectedImg"/>
<div id="modal" class="modal-window">
<p>Barcode Detector is not supported by this browser, please select a barcode reader to use.</p>
<select id="engineSelect">
<option>Dynamsoft Barcode Reader</option>
<option>ZXing</option>
</select>
<button id="okayButton">Okay</button>
</div>
</body>
<script>
var barcodeDetector;
var initialized = false;
let okayButton = document.querySelector("#okayButton");
okayButton.onclick = function() {
console.log("okay clicked");
let modal = document.getElementById("modal");
modal.className = modal.className.replace("active", "");
enablePolyfillAndInit();
};
init();
var fileInput = document.querySelector("#fileInput")
fileInput.onchange = function(event) {
if (initialized === false) {
alert("The detector is still initializing.");
return;
}
var file = event.target.files[0];
var reader = new FileReader();
reader.onload = function(e){
var img = document.getElementById("selectedImg");
img.src = e.target.result;
img.onload = async function() {
var detectedCodes = await barcodeDetector.detect(img);
var json = JSON.stringify(detectedCodes, null, 2);
console.log(json);
alert(json);
}
};
reader.onerror = function () {
console.warn('oops, something went wrong.');
};
reader.readAsDataURL(file);
}
async function init() {
if ("BarcodeDetector" in window) {
alert('Barcode Detector supported!');
barcodeDetector = new window.BarcodeDetector({ formats: ["qr_code"] });
initialized = true;
}else{
document.getElementById("modal").className += " active";
}
}
async function enablePolyfillAndInit(){
let selectedEngine = document.getElementById("engineSelect").selectedOptions[0].value;
console.log(selectedEngine);
if (selectedEngine === "Dynamsoft Barcode Reader") {
BarcodeDetectorPolyfill.engine = "DBR";
BarcodeDetectorPolyfill.setDBRLicense("DLS2eyJoYW5kc2hha2VDb2RlIjoiMjAwMDAxLTE2NDk4Mjk3OTI2MzUiLCJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSIsInNlc3Npb25QYXNzd29yZCI6IndTcGR6Vm05WDJrcEQ5YUoifQ==");
let reader = await BarcodeDetectorPolyfill.initDBR();
console.log("reader");
console.log(reader); // You can modify the runtime settings of the reader instance.
}else{
BarcodeDetectorPolyfill.engine = "ZXing";
}
barcodeDetector = new BarcodeDetectorPolyfill();
initialized = true;
}
</script>
</html>