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 專案上運行，以下教程展示如何在 Blazor 中使用 IronBarcode。

您可以輕鬆地從用戶的網絡攝像頭捕獲 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 Server App。

設定名稱

選擇框架 .NET 6

我們已經準備好

新增 Razor 元件供攝影機使用

命名它

添加 JavaScript 以啟用網絡攝像頭

由於這個應用程式與使用者的網絡攝像頭一起使用，我希望為了隱私保護，每件事情都保留在客戶端。為所有網絡攝像頭功能添加一個命名為 webcam.js 的 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#

現在，我們需要在點擊「Capture Frame」按鈕時調用這個 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#

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