视频免费一区二区,亚洲卡一,国产成人a亚洲精品

Dynamsoft Barcode Reader使用教程：如何使用Blazor WebAssembly構(gòu)建Web條形碼閱讀器

翻譯|使用教程|編輯：楊鵬連|2020-09-29 10:08:59.703|閱讀 682 次

概述：本文將為希望使用Blazor WebAssembly和Dynamsoft JavaScript Barcode SDK構(gòu)建Web條形碼閱讀器應(yīng)用程序的Web開發(fā)人員提供幫助。

相關(guān)鏈接：

Dynamsoft Barcode Reader SDK一款多功能的條碼讀取控件，只需要幾行代碼就可以將條碼讀取功能嵌入到Web或桌面應(yīng)用程序。這可以節(jié)省數(shù)月的開發(fā)時(shí)間和成本。能支持多種圖像文件格式以及從攝像機(jī)或掃描儀獲取的DIB格式。使用Dynamsoft Barcode Reader SDK，你可以創(chuàng)建強(qiáng)大且實(shí)用的條形碼掃描儀軟件，以滿足你的業(yè)務(wù)需求。

點(diǎn)擊下載Dynamsoft Barcode Reader最新版

Blazor是Microsoft開發(fā)的Web框架。它使開發(fā)人員可以使用C＃和HTML創(chuàng)建Web應(yīng)用程序。但是，在開發(fā)Blazor項(xiàng)目時(shí)不可避免地調(diào)用現(xiàn)有的JavaScript API。本文將為希望使用Blazor WebAssembly和Dynamsoft JavaScript Barcode SDK構(gòu)建Web條形碼閱讀器應(yīng)用程序的Web開發(fā)人員提供幫助。

Blazor提供了兩個(gè)模板，Blazor WebAssembly和Blazor Server。

Blazor服務(wù)器

Dynamsoft Barcode Reader使用教程：如何使用Blazor WebAssembly構(gòu)建Web條形碼閱讀器

Blazor服務(wù)器在服務(wù)器端運(yùn)行客戶端UI邏輯，并通過Websocket發(fā)送UI更改。為了方便地處理JavaScript互操作調(diào)用，我選擇Blazor WebAssembly來實(shí)現(xiàn)Web條形碼讀取器示例。

在Blazor WebAssembly項(xiàng)目中調(diào)用Dynamsoft JavaScript條形碼API

使用Blazor WebAssembly模板創(chuàng)建Blazor應(yīng)用程序：

dotnet new blazorwasm -o BlazorBarcodeSample

然后向項(xiàng)目添加一個(gè)新頁面：

cd BlazorBarcodeSample
dotnet new razorcomponent -n BarcodeReader -o Pages

之后，將BarcodeReader屬性添加到Pages / Index.razor：

@page "/"
<h1>Hello, world!</h1>
Welcome to your new app.
<SurveyPrompt Title="How is Blazor working for you?" />
<BarcodeReader />

到目前為止，我們可以運(yùn)行該應(yīng)用程序并查看主頁：

dotnet run

首次運(yùn)行該應(yīng)用程序時(shí)，我們可以打開開發(fā)人員控制臺(tái)以觀察發(fā)生了什么。

Web瀏覽器將獲取并緩存一個(gè)dotnet.wasm文件和一些* .dll文件。

我們可以通過添加<button>和<p>元素對(duì)UI進(jìn)行一些更改。

@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";
}

重新運(yùn)行該應(yīng)用以查看UI更改：

如果重新打開開發(fā)者控制臺(tái)，我們將發(fā)現(xiàn)僅再次獲取了BlazorBarcodeSample.dll。
Dynamsoft Barcode Reader使用教程：如何使用Blazor WebAssembly構(gòu)建Web條形碼閱讀器

下一步是為應(yīng)用程序提供條形碼掃描功能。

將Dynamsoft JavaScript條形碼SDK添加到wwwroot / index.html，然后創(chuàng)建一個(gè)jsInterop.js文件以實(shí)現(xiàn)JavaScript和.NET之間的互操作：

<!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="http://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@7.6.0/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。添加以下代碼以初始化Dynamsoft Barcode Reader：

var barcodereader = null;
(async () => {
    barcodereader = await Dynamsoft.BarcodeReader.createInstance();
    await barcodereader.updateRuntimeSettings('balance');
    let settings = await barcodereader.getRuntimeSettings();
    barcodereader.updateRuntimeSettings(settings);
})();

為了與.NET進(jìn)行交互，我們可以使用JavaScript變量來存儲(chǔ).NET對(duì)象的引用：

var dotnetRef = null;
window.jsFunctions = {
    init: function(obj) {
        dotnetRef = obj;
    },
};

為了將.NET對(duì)象引用傳遞給JavaScript，請(qǐng)注入JavaScript運(yùn)行時(shí)并重寫BarcodeReader.razor中的OnInitialized（）方法：

@inject IJSRuntime JSRuntime
@code {
    private static String result = "No Barcode Found";

    protected override void OnInitialized()
    {
        JSRuntime.InvokeVoidAsync("jsFunctions.init", DotNetObjectReference.Create(this));
    }
    
}

我們要做的是從磁盤驅(qū)動(dòng)器中選擇一個(gè)圖像文件并從該圖像中讀取條形碼。因此，添加一個(gè)按鈕單擊事件以調(diào)用JavaScript條形碼解碼方法：

<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");
    }
}

同時(shí)，創(chuàng)建一個(gè).NET函數(shù)以從JavaScript接收條形碼解碼結(jié)果：

[JSInvokable]
public void ReturnBarcodeResultsAsync(String text)
    {
        result = text;
        this.StateHasChanged();
    }

不要忘記使用StateHasChanged（）刷新UI。

這是JavaScript實(shí)現(xiàn)：

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

現(xiàn)在，我們可以使用一些條形碼圖像來測(cè)試Blazor WebAssembly應(yīng)用程序。