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 服务器应用程序。

设置名称

选择框架 .NET 6

我们已经准备好

为凸轮添加新的 Razor 组件

给它取个名字

添加 JavaScript 以启用网络摄像头

由于此应用程序使用的是用户的网络摄像头，为了保护隐私，我倾向于将所有功能保留在客户端。为所有网络摄像头功能添加 javascript 文件，并将其命名为 webcam.js。

不要忘记在 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() 方法。调用之前编写的 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 "方法。将图像对象传入 "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#

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