Blazor条形码识别应用:在Web中运行C#和JavaScript代码

作者:神秘网友 发布时间:2020-09-09 12:03:46

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条形码识别应用:在Web中运行C#和JavaScript代码
Blazor Server

Blazor条形码识别应用:在Web中运行C#和JavaScript代码
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

Blazor条形码识别应用:在Web中运行C#和JavaScript代码
在初次运行的时候,可以打开开发者控制台观察下加载的资源。

Blazor条形码识别应用:在Web中运行C#和JavaScript代码
我们会发现加载了一个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";
     
}

重新运行程序。

Blazor条形码识别应用:在Web中运行C#和JavaScript代码
这时候再去查看控制台,会发现只加载了BlazorBarcodeSample.dll

Blazor条形码识别应用:在Web中运行C#和JavaScript代码
现在开始增加条形码识别的功能。

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();
    },
};

以下是测试图片和运行结果。
Blazor条形码识别应用:在Web中运行C#和JavaScript代码

Blazor条形码识别应用:在Web中运行C#和JavaScript代码
最后,清理工程,删除没用的FetchData.razor, Counter.razor, SurveyPrompt.razor, 以及相关代码。

Blazor条形码识别应用:在Web中运行C#和JavaScript代码

https://github.com/yushulx/blazor-barcode-sample

Blazor条形码识别应用:在Web中运行C#和JavaScript代码相关教程

  1. (Amazon)亚马逊GIF动态验证码识别95识别率
  2. 华为防火墙跨三层mac识别配置
  3. 借助 Solidity 来识别智能合约的调配模式
  4. 自然语言处理-Stanford中文实体识别
  5. Tensorflow实现LeNet-5 MNIST手写体数字识别分类
  6. pytorch+LeNet+cifar10图像识别+gpu运行
  7. PCA+SVM人脸识别
  8. halcon相关的二维图像识别