1. IronBarcode
  2. 操作指南
  3. 與Blazor一起使用IronBarcode

使用 IronBarcode 的 Blazor 條碼掃描教學

This article was translated from English: Does it need improvement?
Translated
View the article in English

IronBarcode 支持在 Blazor 項目上運行，以下教程顯示了如何將 IronBarcode 與 Blazor 一起使用。

您可以輕鬆地從用戶的網路攝影機捕捉 QR 碼或條形碼圖像。 使用 Blazor 和 JavaScript，當您將 QR 或條碼圖像傳回到您的 C# 代碼時，真正的功效便顯現出來，使您能夠使用 IronBarcode 庫來提取圖像的代碼值。 在本教學中，我們將使用 Blazor 和 IronBarcode 從用戶的網路攝影機中提取已捕獲圖像的 QR 或條碼值。

在 Blazor 中如何使用條碼掃描器

  1. 在Blazor中安裝C#庫來掃描條碼
  2. 建立 Blazor 伺服器專案並新增 Razor 元件
  3. 使用JavaScript啟用網絡攝像頭
  4. 配置 圖像捕捉 將圖像發送到伺服器的方法
  5. 使用解碼條形碼 快速讀取一維條碼 方法和其他直觀的API

創建 Blazor 專案

打開 Visual Studio => 建立新專案 => 選擇 Blazor 伺服器應用程式。

CreateBlazorProject related to 創建 Blazor 專案

設定名稱

ProjectName related to 創建 Blazor 專案

選擇框架 .NET 6

SelectFramework related to 創建 Blazor 專案

我們已經準備好了

MainScreen related to 創建 Blazor 專案

添加新的 Razor 元件以供 cam 使用

NewRazorComponent related to 創建 Blazor 專案

給它一個名字

NewRazorComponentName related to 創建 Blazor 專案

添加 JavaScript 以啟用網絡攝像頭

由於這個應用程式需要使用用戶的網路攝像頭，我傾向於將所有操作保持在客戶端以保障隱私。 為所有網路攝像頭功能添加JavaScript文件，並將其命名為webcam.js。

JavascriptFileLocation related to 添加 JavaScript 以啟用網絡攝像頭

不要忘記在 index.html 文件中包含 javascript 文件。

    <script src="webcam.js"></script>
    <script src="webcam.js"></script>
HTML

將 javascript 網絡攝像頭初始化功能添加到 webcam.js 文件中。

// current video stream
let videoStream;
async function initializeCamera() 
{
    const canvas = document.querySelector("#canvas");
    const video = document.querySelector("#video");
    if (
        !"mediaDevices" in navigator 

        !"getUserMedia" in navigator.mediaDevices
        )
        {
            alert("Camera API is not available in your browser");
            return;
        }

    // video constraints
    const constraints = {
        video: {
            width: {
                min: 180
            },
            height: {
                min: 120
            },
        },
    };

    constraints.video.facingMode = useFrontCamera ? "user" : "environment";

    try
    {
        videoStream = await navigator.mediaDevices.getUserMedia (constraints);    
        video.srcObject = videoStream;
    } 
    catch (err) 
    {
        alert("Could not access the camera" + err);
    }
}
// current video stream
let videoStream;
async function initializeCamera() 
{
    const canvas = document.querySelector("#canvas");
    const video = document.querySelector("#video");
    if (
        !"mediaDevices" in navigator 

        !"getUserMedia" in navigator.mediaDevices
        )
        {
            alert("Camera API is not available in your browser");
            return;
        }

    // video constraints
    const constraints = {
        video: {
            width: {
                min: 180
            },
            height: {
                min: 120
            },
        },
    };

    constraints.video.facingMode = useFrontCamera ? "user" : "environment";

    try
    {
        videoStream = await navigator.mediaDevices.getUserMedia (constraints);    
        video.srcObject = videoStream;
    } 
    catch (err) 
    {
        alert("Could not access the camera" + err);
    }
}
IRON VB CONVERTER ERROR developers@ironsoftware.com
VB   C#

我們需要啟動用戶的網路攝像頭。 在頁面載入時通過覆蓋 OnInitializedAsync 去執行此操作。()Index.razor 的方法。 調用您之前寫的 javascript initializeCamera 函數。

protected override async Task OnInitializedAsync()
{
    await JSRuntime.InvokeVoidAsync("initializeCamera");
}
protected override async Task OnInitializedAsync()
{
    await JSRuntime.InvokeVoidAsync("initializeCamera");
}
Protected Overrides Async Function OnInitializedAsync() As Task
	Await JSRuntime.InvokeVoidAsync("initializeCamera")
End Function
VB   C#

現在添加播放該視頻的HTML標籤。

<section class="section">
    <video autoplay id="video" width="320"></video>
</section>
<section class="section">
    <video autoplay id="video" width="320"></video>
</section>
HTML

捕捉圖像

要從網路攝影機的視頻源捕捉一個畫面，讓我們在webcam.js中編寫另一個javascript函數。 此功能將會將來源影片的當前幀繪製到畫布目的地。

function getFrame(dotNetHelper) 
{
    canvas.width = video.videoWidth;
    canvas.height = video.videoHeight;
    canvas.getContext('2d').drawImage(video, 0, 0);
    let dataUrl = canvas.toDataURL("image/png");
    //Invoke ProcessImage Function and send DataUrl as a parameter to it 
    dotNetHelper.invokeMethodAsync('ProcessImage', dataUrl);
}
function getFrame(dotNetHelper) 
{
    canvas.width = video.videoWidth;
    canvas.height = video.videoHeight;
    canvas.getContext('2d').drawImage(video, 0, 0);
    let dataUrl = canvas.toDataURL("image/png");
    //Invoke ProcessImage Function and send DataUrl as a parameter to it 
    dotNetHelper.invokeMethodAsync('ProcessImage', dataUrl);
}
HTML

它會捕捉一個畫面，然後將其編碼為64位的Base64，再將編碼後的圖像發送給ProcessImage函數，該函數會將編碼後的圖像發送到伺服器端的API進行處理。

[JSInvokable]
public async void ProcessImage(string imageString)
{

    var imageObject = new CamImage();
    imageObject.imageDataBase64 = imageString;
    var jsonObj = System.Text.Json.JsonSerializer.Serialize(imageObject);
    //Do image processing here
    var barcodeeResult = await Http.PostAsJsonAsync($"Ironsoftware/ReadBarCode", imageObject);
    if (barcodeeResult.StatusCode == System.Net.HttpStatusCode.OK)
    {
        QRCodeResult = barcodeeResult.Content.ReadAsStringAsync().Result;
        StateHasChanged();
    }
}
[JSInvokable]
public async void ProcessImage(string imageString)
{

    var imageObject = new CamImage();
    imageObject.imageDataBase64 = imageString;
    var jsonObj = System.Text.Json.JsonSerializer.Serialize(imageObject);
    //Do image processing here
    var barcodeeResult = await Http.PostAsJsonAsync($"Ironsoftware/ReadBarCode", imageObject);
    if (barcodeeResult.StatusCode == System.Net.HttpStatusCode.OK)
    {
        QRCodeResult = barcodeeResult.Content.ReadAsStringAsync().Result;
        StateHasChanged();
    }
}
<JSInvokable>
Public Async Sub ProcessImage(ByVal imageString As String)

	Dim imageObject = New CamImage()
	imageObject.imageDataBase64 = imageString
	Dim jsonObj = System.Text.Json.JsonSerializer.Serialize(imageObject)
	'Do image processing here
	Dim barcodeeResult = Await Http.PostAsJsonAsync($"Ironsoftware/ReadBarCode", imageObject)
	If barcodeeResult.StatusCode = System.Net.HttpStatusCode.OK Then
		QRCodeResult = barcodeeResult.Content.ReadAsStringAsync().Result
		StateHasChanged()
	End If
End Sub
VB   C#

现在，我们需要在点击“捕获帧”按钮时调用这个js函数。 請記住，我們的按鈕正在尋找一個名為 CaptureFrame 的處理方法。

private async Task CaptureFrame()
{
    await JSRuntime.InvokeAsync<String>("getFrame", DotNetObjectReference.Create(this));
}
private async Task CaptureFrame()
{
    await JSRuntime.InvokeAsync<String>("getFrame", DotNetObjectReference.Create(this));
}
Private Async Function CaptureFrame() As Task
	Await JSRuntime.InvokeAsync(Of String)("getFrame", DotNetObjectReference.Create(Me))
End Function
VB   C#

IronBarcode 提取捕獲的圖像

將 IronBarcode 添加到服務器項目。

Install-Package BarCode

現在，在伺服器項目中添加 API 來處理編碼圖像並提取 QR 或條碼值。 以下的代碼將這個Blazor項目轉變為條碼掃描器。 從掃描的圖像中，我們執行預處理並將其輸入到 FromStream 方法中。 將 Image 物件傳遞至 BarcodeReader 類別中的方法來掃描 Blazor 中的條碼。 生成的條碼值可以從BarcodeResult對象的Value屬性中訪問。

[HttpPost]
[Route("ReadBarCode")]
public string ReadBarCode(CamImage imageData)
{
    try
        {
            var splitObject = imageData.imageDataBase64.Split(',');
            byte [] imagebyteData = Convert.FromBase64String((splitObject.Length > 1) ? splitObject [1] : splitObject [0]);
            IronBarCode.License.LicenseKey = "Key";

            using (var ms = new MemoryStream(imagebyteData))
            {
                Image barcodeImage = Image.FromStream(ms);
                var result = IronBarCode.BarcodeReader.Read(barcodeImage);
                if (result == null 
 result.Value == null)
                {
                    return $"{DateTime.Now} : Barcode is Not Detetced";
                }

                return $"{DateTime.Now} : Barcode is ({result.Value})";
            }

        }
    catch (Exception ex)
        {
            return $"Exception is {ex.Message}";
        }
}

//Post Object 
public class CamImage
{
    public string imageDataBase64 { get; set; }
}
[HttpPost]
[Route("ReadBarCode")]
public string ReadBarCode(CamImage imageData)
{
    try
        {
            var splitObject = imageData.imageDataBase64.Split(',');
            byte [] imagebyteData = Convert.FromBase64String((splitObject.Length > 1) ? splitObject [1] : splitObject [0]);
            IronBarCode.License.LicenseKey = "Key";

            using (var ms = new MemoryStream(imagebyteData))
            {
                Image barcodeImage = Image.FromStream(ms);
                var result = IronBarCode.BarcodeReader.Read(barcodeImage);
                if (result == null 
 result.Value == null)
                {
                    return $"{DateTime.Now} : Barcode is Not Detetced";
                }

                return $"{DateTime.Now} : Barcode is ({result.Value})";
            }

        }
    catch (Exception ex)
        {
            return $"Exception is {ex.Message}";
        }
}

//Post Object 
public class CamImage
{
    public string imageDataBase64 { get; set; }
}
IRON VB CONVERTER ERROR developers@ironsoftware.com
VB   C#

您可以找到範例專案這裡.