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. 利用条形码解码 快速读取一个条形码 方法和其他直观的应用程序接口

创建 Blazor 项目

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

CreateBlazorProject related to 创建 Blazor 项目

设置名称

ProjectName related to 创建 Blazor 项目

选择框架 .NET 6

SelectFramework related to 创建 Blazor 项目

我们已经准备好了

MainScreen related to 创建 Blazor 项目

为 cam 添加新的 Razor 组件

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

在 webcam.js 文件中添加 javascript 网络摄像头启动函数。

// 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 位，并将编码后的图像发送到 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#

您可以找到示例项目这里.