Skip to content

Commit 3d5b008

Browse files
felixindrawanfelixindrawan
committed
fix: removed unused codes and add multiple image decode
1 parent fcf78ac commit 3d5b008

File tree

3 files changed

+60
-68
lines changed

3 files changed

+60
-68
lines changed

‎hello-world/blazor/README.md‎

Lines changed: 31 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -191,22 +191,17 @@ In `Pages\DecodeImage.razor`, we will modify the component to enable barcode dec
191191
<PageTitle>Dynamsoft Barcode Reader Hello World - Blazor</PageTitle>
192192
193193
<h1>Decode Image</h1>
194-
<InputFile id="inputElement" style="margin-bottom: 1rem" OnChange="DecodeImageTask" accept="image/*" />
194+
<InputFile id="inputElement" style="margin-bottom: 1rem" OnChange="DecodeImageTask" accept="image/*" multiple />
195195
<h3 style="margin-bottom: 1rem">Results:</h3>
196196
<div id="results" style="width: 100%; height: 30vh; overflow: auto; white-space: pre-wrap"></div>
197197
198198
@code {
199199
// reference: https://learn.microsoft.com/en-us/aspnet/core/blazor/javascript-interoperability/call-javascript-from-dotnet?view=aspnetcore-8.0#invoke-js-functions
200200
201-
private async Task DecodeImageTask(InputFileChangeEventArgs e)
201+
private async Task DecodeImageTask()
202202
{
203203
// Dynamically load decode image module
204204
await JS.InvokeVoidAsync("loadDecodeImageModule");
205-
206-
var imageFile = e.File;
207-
var jsImageStream = imageFile.OpenReadStream(1024 * 1024 * 20);
208-
var dotnetImageStream = new DotNetStreamReference(jsImageStream);
209-
210205
await JS.InvokeAsync<string>("startImageDecode");
211206
}
212207
@@ -232,36 +227,37 @@ Reference: https://learn.microsoft.com/en-us/aspnet/core/blazor/javascript-inter
232227
```
233228
// Create JS function "startImageDecode"
234229
window.startImageDecode = async () => {
235-
const inputElement = document.getElementById("inputElement");
236-
const resultsContainer = document.getElementById("results");
237-
238-
const file = inputElement.files[0]; // Get the first file from the input element
239-
240-
try {
241-
if (file) {
242-
// Convert file to blob
243-
const arrayBuffer = await file.arrayBuffer();
244-
const blob = new Blob([arrayBuffer]);
245-
246-
cvRouter = await Dynamsoft.CVR.CaptureVisionRouter.createInstance();
247-
const result = await cvRouter.capture(blob, "ReadBarcodes_SpeedFirst");
248-
resultsContainer.innerText = `File: ${file.name}\n`;
249-
for (let item of result.items) {
250-
if (item.type !== Dynamsoft.Core.EnumCapturedResultItemType.CRIT_BARCODE) {
251-
continue;
252-
}
253-
resultsContainer.innerText += item.text + "\n";
254-
}
255-
if (!result.items.length) resultsContainer.innerText += "No barcode found\n";
256-
257-
await cvRouter?.dispose()
230+
const inputElement = document.getElementById("inputElement");
231+
const resultsContainer = document.getElementById("results");
232+
resultsContainer.innerText = ""; // Reset results container
233+
234+
const { files } = inputElement;
235+
236+
try {
237+
for (let file of files) {
238+
cvRouter = await Dynamsoft.CVR.CaptureVisionRouter.createInstance();
239+
// Decode selected image with 'ReadBarcodes_SpeedFirst' template.
240+
const result = await cvRouter.capture(file, "ReadBarcodes_SpeedFirst");
241+
if (files.length > 1) {
242+
resultsContainer.innerText += `\nFile: ${file.name}\n`;
243+
}
244+
for (let item of result.items) {
245+
if (item.type !== Dynamsoft.Core.EnumCapturedResultItemType.CRIT_BARCODE) {
246+
continue;
258247
}
259-
} catch (ex) {
260-
let errMsg = ex.message || ex;
261-
console.error(errMsg);
262-
resultsContainer.innerText += `Error: ${errMsg}`
248+
resultsContainer.innerText += item.text + "\n";
249+
console.log(item.text);
250+
}
251+
if (!result.items.length) resultsContainer.innerText += "No barcode found\n";
263252
}
264-
}
253+
} catch (ex) {
254+
let errMsg = ex.message || ex;
255+
console.error(errMsg);
256+
alert(errMsg);
257+
} finally {
258+
await cvRouter?.dispose();
259+
}
260+
};
265261
```
266262

267263
### Modify the `wwwroot\index.html` file

‎hello-world/blazor/hello-world-blazor/BlazorApp1/Pages/DecodeImage.razor‎

Lines changed: 2 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -4,22 +4,17 @@
44
<PageTitle>Dynamsoft Barcode Reader Hello World - Blazor</PageTitle>
55

66
<h1>Decode Image</h1>
7-
<InputFile id="inputElement" style="margin-bottom: 1rem" OnChange="DecodeImageTask" accept="image/*" />
7+
<InputFile id="inputElement" style="margin-bottom: 1rem" OnChange="DecodeImageTask" accept="image/*" multiple />
88
<h3 style="margin-bottom: 1rem">Results:</h3>
99
<div id="results" style="width: 100%; height: 30vh; overflow: auto; white-space: pre-wrap"></div>
1010

1111
@code {
1212
// reference: https://learn.microsoft.com/en-us/aspnet/core/blazor/javascript-interoperability/call-javascript-from-dotnet?view=aspnetcore-8.0#invoke-js-functions
1313
14-
private async Task DecodeImageTask(InputFileChangeEventArgs e)
14+
private async Task DecodeImageTask()
1515
{
1616
// Dynamically load decode image module
1717
await JS.InvokeVoidAsync("loadDecodeImageModule");
18-
19-
var imageFile = e.File;
20-
var jsImageStream = imageFile.OpenReadStream(1024 * 1024 * 20);
21-
var dotnetImageStream = new DotNetStreamReference(jsImageStream);
22-
2318
await JS.InvokeAsync<string>("startImageDecode");
2419
}
2520

‎hello-world/blazor/hello-world-blazor/BlazorApp1/wwwroot/decodeImage.js‎

Lines changed: 27 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,33 @@
11
// Create JS function "startImageDecode"
22
window.startImageDecode = async () => {
3-
const inputElement = document.getElementById("inputElement");
4-
const resultsContainer = document.getElementById("results");
3+
const inputElement = document.getElementById("inputElement");
4+
const resultsContainer = document.getElementById("results");
5+
resultsContainer.innerText = ""; // Reset results container
56

6-
const file = inputElement.files[0]; // Get the first file from the input element
7+
const { files } = inputElement;
78

8-
try {
9-
if (file) {
10-
// Convert file to blob
11-
const arrayBuffer = await file.arrayBuffer();
12-
const blob = new Blob([arrayBuffer]);
13-
14-
cvRouter = await Dynamsoft.CVR.CaptureVisionRouter.createInstance();
15-
const result = await cvRouter.capture(blob, "ReadBarcodes_SpeedFirst");
16-
resultsContainer.innerText = `File: ${file.name}\n`;
17-
for (let item of result.items) {
18-
if (item.type !== Dynamsoft.Core.EnumCapturedResultItemType.CRIT_BARCODE) {
19-
continue;
20-
}
21-
resultsContainer.innerText += item.text + "\n";
22-
}
23-
if (!result.items.length) resultsContainer.innerText += "No barcode found\n";
24-
25-
await cvRouter?.dispose()
9+
try {
10+
for (let file of files) {
11+
cvRouter = await Dynamsoft.CVR.CaptureVisionRouter.createInstance();
12+
// Decode selected image with 'ReadBarcodes_SpeedFirst' template.
13+
const result = await cvRouter.capture(file, "ReadBarcodes_SpeedFirst");
14+
if (files.length > 1) {
15+
resultsContainer.innerText += `\nFile: ${file.name}\n`;
16+
}
17+
for (let item of result.items) {
18+
if (item.type !== Dynamsoft.Core.EnumCapturedResultItemType.CRIT_BARCODE) {
19+
continue;
2620
}
27-
} catch (ex) {
28-
let errMsg = ex.message || ex;
29-
console.error(errMsg);
30-
resultsContainer.innerText += `Error: ${errMsg}`
21+
resultsContainer.innerText += item.text + "\n";
22+
console.log(item.text);
23+
}
24+
if (!result.items.length) resultsContainer.innerText += "No barcode found\n";
3125
}
32-
}
26+
} catch (ex) {
27+
let errMsg = ex.message || ex;
28+
console.error(errMsg);
29+
alert(errMsg);
30+
} finally {
31+
await cvRouter?.dispose();
32+
}
33+
};

0 commit comments

Comments
 (0)