1. IronBarcode
  2. 操作指南
  3. 在Blazor中使用IronBarcode

在 Blazor 中使用 IronBarcode

查克尼特·宾
查克尼特·宾
2022年四月7日
更新 2024年十二月17日
分享:
This article was translated from English: Does it need improvement?
Translated
View the article in English

这篇说明文章包含如何在 Blazor 项目中集成 IronBarcode 的详细说明。 例如，我们将在 Blazor 应用程序中使用 IronBarcode 扫描从用户网络摄像头捕获的条形码/QR。

如何在 Blazor 中使用条码扫描器

  1. Install C# library to scan barcodes in Blazor
  2. 创建 Blazor 服务器项目并添加新的 Razor 组件
  3. 使用 JavaScript 启用网络摄像头
  4. 配置图像捕捉方法，将图像发送到服务器
  5. 利用BarcodeReader.Read方法解码条形码

创建 Blazor 项目

打开 Visual Studio => 创建新项目 => Blazor 服务器应用程序：

CreateBlazorProject related to 创建 Blazor 项目

设置项目名称和位置：

ProjectName related to 创建 Blazor 项目

选择 .NET 6 框架（或任何其他现代 Standard .NET 版本）：

SelectFramework related to 创建 Blazor 项目

我们已经准备就绪：

MainScreen related to 创建 Blazor 项目

要添加网络摄像头支持，请添加一个新的 Razor 组件：

NewRazorComponent related to 创建 Blazor 项目

给它取个名字，然后点击 Add：

NewRazorComponentName related to 创建 Blazor 项目

使用 JavaScript 启用网络摄像头功能

由于该应用程序使用的是用户的网络摄像头，因此应在客户端进行处理，以保护隐私。 向项目中添加一个JavaScript文件以处理网络摄像头功能，并命名为webcam.js：

JavascriptFileLocation related to 使用 JavaScript 启用网络摄像头功能

别忘了在index.html中包含对webcam.js的引用：

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

将以下代码添加到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);
    }
}
JAVASCRIPT

我们需要打开用户的网络摄像头。 通过重写 Index.razor 的 OnInitializedAsync() 方法，在页面加载时执行此操作。 调用您之前编写的 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
$vbLabelText   $csharpLabel

现在添加运行网络摄像头视频流的 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);
}
JAVASCRIPT

此函数将捕获一个帧，将其编码为base64，然后将编码后的图像发送到C#中的一个名为ProcessImage()的方法。 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
$vbLabelText   $csharpLabel

它处理将编码的图像从getFrame()中通过JavaScript发送到服务器端API进行处理。

接下来，当点击Capture Frame按钮时，我们需要调用这个JavaScript函数。 请记住，我们的按钮正在寻找名为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
$vbLabelText   $csharpLabel

IronBarcode 提取捕获的图像

将 IronBarcode NuGet 软件包添加到服务器项目中：

Install-Package BarCode

现在，在服务器项目中，添加一个 API 方法来处理编码图像并提取 BarCode/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 = 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 = 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 Function ReadBarCode(ByVal imageData As CamImage) As String
	Try
			Dim splitObject = imageData.imageDataBase64.Split(","c)
			Dim imagebyteData() As Byte = Convert.FromBase64String(If(splitObject.Length > 1, splitObject (1), splitObject (0)))
			IronBarCode.License.LicenseKey = "Key"

			Using ms = New MemoryStream(imagebyteData)
				Dim barcodeImage As Image = Image.FromStream(ms)
				Dim result = BarcodeReader.Read(barcodeImage)
				If result Is Nothing result.Value Is Nothing Then
					Return $"{DateTime.Now} : Barcode is Not Detetced"
				End If

				Return $"{DateTime.Now} : Barcode is ({result.Value})"
			End Using

	Catch ex As Exception
			Return $"Exception is {ex.Message}"
	End Try
End Function

'Post Object 
Public Class CamImage
	Public Property imageDataBase64() As String
End Class
$vbLabelText   $csharpLabel

您可以在这里找到示例项目。

查克尼特·宾
查克尼特·宾
  立即与工程团队聊天
软件工程师
Chaknith 负责 IronXL 和 IronBarcode 的工作。他在 C# 和 .NET 方面拥有深厚的专业知识，帮助改进软件并支持客户。他从用户互动中获得的洞察力，有助于提升产品、文档和整体体验。