欧美中文字幕,日韩免费一级a毛,国产福利在线不卡

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

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

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

相關鏈接：

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

點擊下載Dynamsoft Barcode Reader最新版

Blazor是Microsoft開發的Web框架。它使開發人員可以使用C＃和HTML創建Web應用程序。但是，在開發Blazor項目時不可避免地調用現有的JavaScript API。本文將為希望使用Blazor WebAssembly和Dynamsoft JavaScript Barcode SDK構建Web條形碼閱讀器應用程序的Web開發人員提供幫助。

Blazor提供了兩個模板，Blazor WebAssembly和Blazor Server。

Blazor服務器

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

Blazor服務器在服務器端運行客戶端UI邏輯，并通過Websocket發送UI更改。為了方便地處理JavaScript互操作調用，我選擇Blazor WebAssembly來實現Web條形碼讀取器示例。

在Blazor WebAssembly項目中調用Dynamsoft JavaScript條形碼API

使用Blazor WebAssembly模板創建Blazor應用程序：

dotnet new blazorwasm -o BlazorBarcodeSample

然后向項目添加一個新頁面：

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 />

到目前為止，我們可以運行該應用程序并查看主頁：

dotnet run

首次運行該應用程序時，我們可以打開開發人員控制臺以觀察發生了什么。

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

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

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

重新運行該應用以查看UI更改：

如果重新打開開發者控制臺，我們將發現僅再次獲取了BlazorBarcodeSample.dll。
Dynamsoft Barcode Reader使用教程：如何使用Blazor WebAssembly構建Web條形碼閱讀器

下一步是為應用程序提供條形碼掃描功能。

將Dynamsoft JavaScript條形碼SDK添加到wwwroot / index.html，然后創建一個jsInterop.js文件以實現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進行交互，我們可以使用JavaScript變量來存儲.NET對象的引用：

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

為了將.NET對象引用傳遞給JavaScript，請注入JavaScript運行時并重寫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));
    }
    
}

我們要做的是從磁盤驅動器中選擇一個圖像文件并從該圖像中讀取條形碼。因此，添加一個按鈕單擊事件以調用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");
    }
}

同時，創建一個.NET函數以從JavaScript接收條形碼解碼結果：

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

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

這是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 WebAssembly應用程序。