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