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 BlazorBarcodeSampledotnet new razorcomponent -n BarcodeReader -o Pages

把生成的BarcodeReader頁面添加到首頁中：

@page "/"

Hello, world!

Welcome to your new app.

現在可以運行看下效果：

dotnet run

在初次運行的時候，可以打開開發者控制臺觀察下加載的資源。

我們會發現加載了一個dotnet.wasm文件和一些dll文件。因為有了瀏覽器中的.NET運行環境，瀏覽器就可以執行C#代碼。

接下來對頁面做一點修改。 Index.razor:

@page "/"

Blazor Barcode Sample

BarcodeReader.razor:

@page "/barcodereader" Read Barcodes from Files

@result

@code { private static String result = "No Barcode Found"; }

重新運行程序。

這時候再去查看控制臺，會發現只加載了BlazorBarcodeSample.dll。

現在開始增加條形碼識別的功能。

把Dynamsoft JavaScript Barcode SDK添加到wwwroot/index.html中，并創建jsInterop.js用于C#和JavaScript之間的交互：

BlazorBarcodeSample

在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的接口來完成文件讀取和解碼：

Read Barcodes from Files@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

總結

以上是生活随笔為你收集整理的javascript调用dll_Blazor条码识别：Web中运行C#和JavaScript的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。