Skip to content

Commit 11eb306

Browse files
KeillionKeillion
committed
Update 2.read-an-image.html
1 parent ff53589 commit 11eb306

File tree

1 file changed

+62
-138
lines changed

1 file changed

+62
-138
lines changed

‎1.hello-world/2.read-an-image.html‎

Lines changed: 62 additions & 138 deletions
Original file line numberDiff line numberDiff line change
@@ -11,18 +11,20 @@
1111
</head>
1212

1313
<body>
14-
<h1 style="font-size: 1.5em;">Read Barcode from Images</h1>
15-
<input id="ipt-file" type="file" style="margin-bottom: 2vh;" accept="image/png,image/jpeg,image/bmp,image/gif">
16-
<input type="text" id="result" title="Double click to clear!" readonly="true" class="latest-result" placeholder="The Last Read Barcode">
17-
<div id="UIElement">
18-
<img id="imgToRead" alt="Image to read" hidden /><br>
19-
<span id='lib-load' style='font-size:1.5em'>Loading Library...</span>
20-
<span id='reading' style='font-size:1.5em;display:none;'>Reading Barcodes...</span>
21-
</div>
22-
<div>
23-
<span>All Results:</span><br>
24-
<div id="results"></div>
14+
<div style="width:80vw;margin:0 auto;">
15+
<h1 style="font-size: 1.5em;">Read Barcode from Images</h1>
16+
<input id="ipt-file" type="file" accept="image/png,image/jpeg,image/bmp,image/gif">
17+
<input id="ipt-readonly-last-result" title="Double click to clear!" readonly placeholder="The Last Read Barcode" style="width:80vw;margin-top:20px;">
18+
<p id='p-loading' style='font-size:1.5em'>Loading Library...</p>
19+
<p id='p-reading' style='font-size:1.5em;display:none;'>Reading Barcodes...</p>
20+
<div id="div-cvs-container" style="width:80vw;height:40vh;margin-top:20px;display:flex;justify-content:center;"></div>
21+
<p>All Results:</p>
22+
<div id="div-results" style="width:80vw;height:15vh;padding:16px;overflow-y:auto;border: 1px dashed grey;"></div>
2523
</div>
24+
<style>
25+
.sp-resultText { color: #cE5E04 }
26+
#div-cvs-container canvas { border: solid 1px gray; }
27+
</style>
2628
<script>
2729
/** LICENSE ALERT - README
2830
* The library requires a license to work.
@@ -42,7 +44,7 @@ <h1 style="font-size: 1.5em;">Read Barcode from Images</h1>
4244
(async()=>{
4345
try {
4446
await Dynamsoft.DBR.BarcodeReader.loadWasm();
45-
document.getElementById('lib-load').style.display = 'none';
47+
document.getElementById('p-loading').style.display = 'none';
4648
} catch (ex) {
4749
alert(ex.message);
4850
throw ex;
@@ -52,146 +54,68 @@ <h1 style="font-size: 1.5em;">Read Barcode from Images</h1>
5254

5355

5456

57+
// html elements
58+
const iptFile = document.getElementById('ipt-file');
59+
const iptReadonlyLastResult = document.getElementById('ipt-readonly-last-result');
60+
const pReading = document.getElementById('p-reading');
61+
const divResults = document.getElementById('div-results');
62+
const divCvsContainer = document.getElementById('div-cvs-container');
63+
64+
5565
// reader for decoding pictures
5666
let pReader = null;
57-
document.getElementById('ipt-file').addEventListener('change', async function() {
67+
iptFile.addEventListener('change', async function() {
68+
const file = this.files[0];
69+
pReading.style.display = '';
5870
try {
59-
document.getElementById("imgToRead").hidden = true;
60-
pReader = pReader || Dynamsoft.DBR.BarcodeReader.createInstance();
61-
let reader = await pReader;
62-
document.getElementById('reading').style.display = '';
63-
for (let i = 0; i < this.files.length; ++i) {
64-
// In our case, there will only be one file here (no 'multiple' attribute)
65-
let file = this.files[i];
66-
let time = ((new Date()).getTime()).toString();
67-
if (FileReader) {
68-
var fr = new FileReader();
69-
fr.onload = function() {
70-
document.getElementById("imgToRead").src = fr.result;
71-
document.getElementById("imgToRead").hidden = false;
72-
}
73-
fr.readAsDataURL(file);
74-
}
75-
// Decode the file and show results
76-
let results = await reader.decode(file);
77-
let newElements = [];
78-
newElements.push(createASpan(file.name + ": ", "bigger"));
79-
newElements.push(document.createElement('br'));
80-
newElements.push(document.createElement('br'));
81-
if (results.length === 0) {
82-
newElements.push(createASpan("No Barcode Found!"));
83-
newElements.push(document.createElement('br'));
84-
}
85-
for (let result of results) {
86-
document.getElementById('result').value = result.barcodeFormatString + ": " + result.barcodeText;
87-
newElements.push(createASpan(result.barcodeFormatString + ": "));
88-
newElements.push(createASpan(result.barcodeText, "resultText"));
89-
newElements.push(document.createElement('br'));
90-
if (result.barcodeText.indexOf("Attention(exceptionCode") != -1) {
91-
newElements.push(createASpan(" Error: " + result.exception.message));
92-
newElements.push(document.createElement('br'));
93-
}
94-
}
95-
newElements.push(document.createElement('hr'));
96-
for (let span of newElements) {
97-
document.getElementById('results').appendChild(span);
71+
const reader = await (pReader = pReader || Dynamsoft.DBR.BarcodeReader.createInstance());
72+
reader.ifSaveOriginalImageInACanvas = true;
73+
const results = await reader.decode(file);
74+
75+
// show image
76+
divCvsContainer.innerHTML = '';
77+
divCvsContainer.appendChild(reader.oriCanvas);
78+
79+
// show results
80+
divResults.appendChild(createEl('h3', file.name + ": "));
81+
if (0 === results.length) {
82+
divResults.appendChild(createEl('p', "No Barcode Found!"));
83+
}
84+
for (let result of results) {
85+
iptReadonlyLastResult.value = result.barcodeFormatString + ": " + result.barcodeText; // show last txt result
86+
const p = document.createElement('p');
87+
p.appendChild(createEl('span', result.barcodeFormatString + ": "));
88+
p.appendChild(createEl('span', result.barcodeText, "sp-resultText"));
89+
divResults.appendChild(p);
90+
if (result.barcodeText.indexOf("Attention(exceptionCode") != -1) {
91+
divResults.appendChild(createEl('p', "Error: " + result.exception.message));
9892
}
99-
document.getElementById('results').scrollTop = document.getElementById('results').scrollHeight;
10093
}
101-
document.getElementById('reading').style.display = 'none';
94+
95+
divResults.appendChild(document.createElement('hr'));
96+
divResults.scrollTop = divResults.scrollHeight;
10297
} catch (ex) {
10398
alert(ex.message);
10499
throw ex;
100+
} finally {
101+
pReading.style.display = 'none';
102+
this.value = '';
105103
}
106-
this.value = '';
107104
});
108-
document.getElementById('result').addEventListener('dblclick', async() => {
109-
document.getElementById('result').value = "";
105+
106+
iptReadonlyLastResult.addEventListener('dblclick', async() => {
107+
iptReadonlyLastResult.value = "";
110108
});
111109

112-
function createASpan(txt, className) {
113-
let newSPAN = document.createElement("span");
114-
newSPAN.textContent = txt;
115-
if (className)
116-
newSPAN.className = className;
117-
return newSPAN;
110+
function createEl(type, txt, className) {
111+
const el = document.createElement(type);
112+
el.textContent = txt;
113+
if (className){
114+
el.className = className;
115+
}
116+
return el;
118117
}
119118
</script>
120119
</body>
121-
<style>
122-
body {
123-
display: flex;
124-
flex-direction: column;
125-
align-items: center;
126-
justify-content: center;
127-
overflow: hidden;
128-
width: 100vw;
129-
height: 90vh;
130-
color: #455A64;
131-
margin: 0;
132-
}
133-
134-
button {
135-
font-size: 1.5rem;
136-
margin-bottom: 2vh;
137-
}
138-
139-
span {
140-
font-size: 0.8rem;
141-
}
142-
143-
.latest-result {
144-
display: block;
145-
margin: 0;
146-
padding: 0.4rem 0.8rem;
147-
color: inherit;
148-
width: 80vw;
149-
border: none;
150-
font-size: 1rem;
151-
border-radius: 0.2rem;
152-
text-align: center;
153-
}
154-
155-
.latest-result::placeholder {
156-
color: #B0BEC5;
157-
}
158-
159-
.latest-result:focus {
160-
outline: none;
161-
box-shadow: 0.1rem 0.4rem 0.8rem #5e35b1;
162-
}
163-
164-
#results {
165-
border: 1px dashed grey;
166-
overflow: auto;
167-
width: 80vw;
168-
padding: 2vmin;
169-
margin-bottom: 3vh;
170-
height: 15vh;
171-
}
172-
173-
.resultText {
174-
color: #cE5E04
175-
}
176-
177-
.bigger {
178-
font-size: large;
179-
margin-bottom: 2%;
180-
}
181-
182-
#UIElement {
183-
margin: 2vmin auto;
184-
text-align: center;
185-
font-size: medium;
186-
height: 40vh;
187-
width: 80vw;
188-
}
189-
190-
#UIElement img {
191-
max-width: 100%;
192-
max-height: 90%;
193-
border: solid 1px gray;
194-
}
195-
</style>
196120

197121
</html>

0 commit comments

Comments
 (0)