Blazor条形码识别应用：在Web中运行C#和JavaScript代码
Blazor条形码识别应用：在Web中运行C#和JavaScript代码
Blazor条形码识别应用：在Web中运行C#和JavaScript代码Blazor是微软开发的Web框架，目的是让开发者使用C#和HTML来开发Web应用。然而，JavaScript必不可少。所以微软也提供了C#和JavaScript互相调用的方法。这篇文章分享下如何用Blazor WebAssembly和Dynamsoft JavaScript Barcode SDK来创建一个简单的Web应用，用于识别图片中的条形码。
Blazor提供了两个模板：Blazor WebAssembly和Blazor Server。
Blazor WebAssembly
Blazor Server
Blazor Server的实现方式是把客户端的逻辑放到server端来执行，然后通过WebSocket推送给客户端。要编写前端代码，使用Blazor WebAssembly会更加直观方便。
首先使用 Blazor WebAssembly模板来创建一个工程：
dotnet new blazorwasm -o BlazorBarcodeSample
在工程中增加一个页面：
cd BlazorBarcodeSample
dotnet new razorcomponent -n BarcodeReader -o Pages
把生成的BarcodeReader页面添加到首页中：
@page "/" <h1>Hello, world!</h1> Welcome to your new app. <SurveyPrompt Title="How is Blazor working for you?" /> <BarcodeReader />
现在可以运行看下效果：
dotnet run
在初次运行的时候，可以打开开发者控制台观察下加载的资源。
我们会发现加载了一个dotnet.wasm文件和一些dll文件。因为有了浏览器中的.NET运行环境，浏览器就可以执行C#代码。
接下来对页面做一点修改。
Index.razor:
@page "/" <h1>Blazor Barcode Sample</h1> <BarcodeReader />
BarcodeReader.razor:
@page "/barcodereader"
<button class="btn btn-primary" >Read Barcodes from Files</button>
<p style="color:green;font-style:italic">@result</p>
@code {
private static String result = "No Barcode Found";
}
重新运行程序。
这时候再去查看控制台，会发现只加载了BlazorBarcodeSample.dll。
现在开始增加条形码识别的功能。
把Dynamsoft JavaScript Barcode SDK添加到wwwroot/index.html中，并创建jsInterop.js用于C#和JavaScript之间的交互：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>BlazorBarcodeSample</title>
<base href="/" />
<link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
<link href="css/app.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/dbr.js" data-productKeys="LICENSE-KEY"></script>
</head>
<body>
<script src="_framework/blazor.webassembly.js"></script>
<script src="jsInterop.js"></script>
</body>
</html>
在jsInterop.js中初始化条码识别对象:
var barcodereader = null;
(async () => {
barcodereader = await Dynamsoft.BarcodeReader.createInstance();
await barcodereader.updateRuntimeSettings('balance');
let settings = await barcodereader.getRuntimeSettings();
barcodereader.updateRuntimeSettings(settings);
})();
为了调用.NET接口，可以创建一个JavaScript变量来保存.NET对象的引用：
var dotnetRef = null;
window.jsFunctions = {
init: function(obj) {
dotnetRef = obj;
},
};
在BarcodeReader.razor中重载OnInitialized()，把.NET对象传递给JavaScript：
@inject IJSRuntime JSRuntime
@code {
private static String result = "No Barcode Found";
protected override void OnInitialized()
{
JSRuntime.InvokeVoidAsync("jsFunctions.init", DotNetObjectReference.Create(this));
}
}
在按钮中增加点击事件，调用JS的接口来完成文件读取和解码：
<button class="btn btn-primary" @onclick="ReadBarcodes">Read Barcodes from Files</button>
@code {
private static String result = "No Barcode Found";
protected override void OnInitialized()
{
JSRuntime.InvokeVoidAsync("jsFunctions.init", DotNetObjectReference.Create(this));
}
public async Task ReadBarcodes()
{
await JSRuntime.InvokeVoidAsync(
"jsFunctions.selectFile");
}
}
同时，创建一个.NET函数用于接收从JavaScript回传的数据：
[JSInvokable]
public void ReturnBarcodeResultsAsync(String text)
{
result = text;
this.StateHasChanged();
}
StateHasChanged()用于刷新界面。
JavaScript的文件解码实现：
window.jsFunctions = {
init: function(obj) {
dotnetRef = obj;
},
selectFile: function () {
let input = document.createElement("input");
input.type = "file";
input.onchange = async function () {
let file = input.files[0];
try {
await barcodereader.decode(file).then((results) => {
let txts = [];
try {
for (let i = 0; i < results.length; ++i) {
txts.push(results[i].BarcodeText);
}
let barcoderesults = txts.join(', ');
if (txts.length == 0) {
barcoderesults = 'No barcode found';
}
console.log(barcoderesults);
if (dotnetRef) {
dotnetRef.invokeMethodAsync('ReturnBarcodeResultsAsync', barcoderesults);
}
} catch (e) {
}
});
} catch (error) {
alert(error);
}
};
input.click();
},
};
以下是测试图片和运行结果。
最后，清理工程，删除没用的FetchData.razor, Counter.razor, SurveyPrompt.razor, 以及相关代码。
https://github.com/yushulx/blazor-barcode-sample