Blazor是微軟開發的Web框架，目的是讓開發者使用C#和HTML來開發Web應用。然而，JavaScript必不可少。所以微軟也提供了C#和JavaScript互相調用的方法。這篇文章分享下如何用Blazor WebAssembly和Dynamsoft JavaScript Barcode SDK來創建一個簡單的Web應用，用於識別圖片中的條形碼。
關於Blazor
Blazor提供了兩個模板：Blazor WebAssembly和Blazor Server。
Blazor WebAssembly
Blazor Server
Blazor Server的實現方式是把客戶端的邏輯放到server端來執行，然後通過WebSocket推送給客戶端。要編寫前端代碼，使用Blazor WebAssembly會更加直觀方便。
在Blazor工程中集成JavaScript條形碼SDK
首先使用 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, 以及相關代碼。
