How To Create a Blazor QR Code Scanner

什么是Blazor服务器？

Blazor服务器是ASP.NET Core平台的一部分的Web应用框架。 它使开发人员能够使用C#而不是JavaScript来构建交互式网页用户界面。 这种服务器端模型通过处理用户在SignalR连接上的交互来提供实时网络功能。 这帮助开发人员创建有效和交互的网络应用。

IronQR简介

IronQR is a .NET library that stands out for its ability to read, interpret, and 生成QR码而脱颖而出。 它提供了一系列功能，包括处理不同类型的QR码内容的能力。 IronQR的优势在于其简单性和易于集成到.NET应用中，使其成为开发人员希望整合和创建QR码功能时的理想选择。

创建一个新的Blazor Server应用程序

启动Visual Studio并选择“创建一个新项目”。在项目模板选择屏幕中，找到并选择“Blazor Server App”模板。

选择模板后，输入项目名称和位置（保留其他内容为默认值），然后单击下一步按钮。

现在选择所需的.NET Framework并点击创建按钮。 它将创建一个Blazor Server应用程序。

安装IronQR库

点击菜单栏中的工具。 从下拉菜单中选择NuGet包管理器。 从上下文菜单中选择“管理解决方案的NuGet包”。 这将打开NuGet包管理器标签。

在NuGet包管理器中，在“浏览”标签下搜索“IronQR”。 然后在列表中找到“IronQR”包。点击“安装”按钮。

现在您已经安装了所有内容，我们可以浏览项目结构，并将一切实现到您的项目中。

构建用户界面

QR码扫描器的用户界面主要构建在Index.razor文件中。这个文件，作为Blazor服务器项目的一部分，使用HTML和Razor语法的结合来创建一个动态和交互的网页。 结构包括：

@page "/"
@using System.IO
@using Microsoft.AspNetCore.Components.Forms
@using IronQr
@using IronSoftware.Drawing
@inject IJSRuntime JSRuntime
<PageTitle>QR Code Scanner</PageTitle>
<div>
    <h1>QR Code Scanner</h1> 
    <InputFile OnChange="HandleSelectedFile" accept="image/*" class="file-input" />
    @if (!string.IsNullOrEmpty(qrImageSrcForDisplay))
    {
        <img src="@qrImageSrcForDisplay" alt="QR Code Image" class="qr-image" />
    }
    <button @onclick="ScanQRCode" disabled="@(!fileSelected)" class="button scan-button">Scan QR Code</button>
    @if (!string.IsNullOrEmpty(scannedText))
    {
        <div class="result-section">
            <input type="text" value="@scannedText" readonly class="result-input" />
            <button @onclick="CopyToClipboard" class="button copy-button">Copy</button>
        </div>
    }
</div>

标题和标题：<PageTitle>和<h1>标签分别定义页面的标题和主要标题，为用户设置了上下文。

图像上传控件：使用<InputFile>组件上传QR码图像。 该元素专为仅接受图像文件而设计，通过筛除不相关的文件类型来增强用户体验。

图像显示：上传图像后，使用<img>标签显示。 这种视觉反馈对于用户确认上传了正确的文件至关重要。

扫描按钮：一个标记为@onclick="ScanQRCode"的按钮触发扫描过程。 其可用性取决于是否选择了文件，增强了界面的直观性。

结果显示：扫描到的QR码的文本显示在一个文本输入字段中，便于查看。 另一个按钮允许用户将此文本复制到剪贴板。

在site.css中的CSS样式

QR码扫描器的视觉美观和布局定义在site.css文件中。

.content {
    padding: 20px;
    margin: 10px auto; /* Centers the content */
    max-width: 500px; /* Sets a max width for the content */
    border-radius: 10px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    text-align: center;
}

.file-input, .result-input {
    margin: 10px 0;
    padding: 10px;
    border-radius: 5px;
    border: 1px solid #ddd;
    width: 100%;
}

.button {
    background-color: #4CAF50;
    color: white;
    border: none;
    cursor: pointer;
    padding: 10px;
    margin: 10px 0;
    border-radius: 5px;
    transition: background-color 0.3s, box-shadow 0.3s;
    width: auto; /* Adjusts button width */
    display: inline-block; /* Allows the width to adjust to content */
}

.button:hover {
    background-color: #45a049;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
} 

.qr-image {
    max-width: 300px;
    max-height: 300px;
    display: block;
    margin: 10px auto;
    border-radius: 10px;
}

.result-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.result-input {
    width: 100%;
    box-sizing: border-box;
}

.copy-button {
    margin-top: 10px;
    white-space: nowrap;
}

.content：该类为主要内容区域样式，赋予其定义的宽度，居中对齐和微妙的阴影以增加深度。

.file-input, .result-input：这些类用于为文件输入和结果显示元素样式，确保它们在视觉上保持一致并完全占用其容器的宽度。

.button：按钮样式具有独特的绿色背景，圆角和悬停效果，以获得更好的用户互动。

.qr-image：应用于QR码图像的样式包括尺寸限制和自动边距，以实现居中，使图像突出但不过于压倒。

.result-section：该类确保结果部分内的元素居中对齐，并适当地间隔。

处理文件上传

HandleSelectedFile方法是QR码扫描过程的重要部分，处理用户文件上传并准备其进行扫描。 当用户通过<InputFile>组件选择文件时，将触发此方法。 这在以下代码中显示：

private async Task HandleSelectedFile(InputFileChangeEventArgs e)
{
    selectedFile = e.File;
    fileSelected = true;
    var imagesDirectory = Path.Combine(Directory.GetCurrentDirectory(), "UploadedImages");
    Directory.CreateDirectory(imagesDirectory); // Ensure the directory exists

    // Use a GUID as the unique file name
    var uniqueFileName = Guid.NewGuid().ToString() + Path.GetExtension(selectedFile.Name);
    var fullPath = Path.Combine(imagesDirectory, uniqueFileName);

    await using (var fileStream = new FileStream(fullPath, FileMode.Create))
    {
        await selectedFile.OpenReadStream().CopyToAsync(fileStream);
    }

    // Store the full path in qrImageSrc for scanning
    qrImageSrc = fullPath;

    // Optionally, create a base64 string for displaying the image (if needed)
    byte[] imageBytes = await File.ReadAllBytesAsync(fullPath);
    var base64String = Convert.ToBase64String(imageBytes);
    qrImageSrcForDisplay = $"data:image/{Path.GetExtension(selectedFile.Name).TrimStart('.')};base64,{base64String}";
}

private async Task HandleSelectedFile(InputFileChangeEventArgs e)
{
    selectedFile = e.File;
    fileSelected = true;
    var imagesDirectory = Path.Combine(Directory.GetCurrentDirectory(), "UploadedImages");
    Directory.CreateDirectory(imagesDirectory); // Ensure the directory exists

    // Use a GUID as the unique file name
    var uniqueFileName = Guid.NewGuid().ToString() + Path.GetExtension(selectedFile.Name);
    var fullPath = Path.Combine(imagesDirectory, uniqueFileName);

    await using (var fileStream = new FileStream(fullPath, FileMode.Create))
    {
        await selectedFile.OpenReadStream().CopyToAsync(fileStream);
    }

    // Store the full path in qrImageSrc for scanning
    qrImageSrc = fullPath;

    // Optionally, create a base64 string for displaying the image (if needed)
    byte[] imageBytes = await File.ReadAllBytesAsync(fullPath);
    var base64String = Convert.ToBase64String(imageBytes);
    qrImageSrcForDisplay = $"data:image/{Path.GetExtension(selectedFile.Name).TrimStart('.')};base64,{base64String}";
}

Private Async Function HandleSelectedFile(ByVal e As InputFileChangeEventArgs) As Task
	selectedFile = e.File
	fileSelected = True
	Dim imagesDirectory = Path.Combine(Directory.GetCurrentDirectory(), "UploadedImages")
	Directory.CreateDirectory(imagesDirectory) ' Ensure the directory exists

	' Use a GUID as the unique file name
	Dim uniqueFileName = Guid.NewGuid().ToString() & Path.GetExtension(selectedFile.Name)
	Dim fullPath = Path.Combine(imagesDirectory, uniqueFileName)

'INSTANT VB TODO TASK: Local functions are not converted by Instant VB:
'	await using(var fileStream = New FileStream(fullPath, FileMode.Create))
'	{
'		await selectedFile.OpenReadStream().CopyToAsync(fileStream);
'	}

	' Store the full path in qrImageSrc for scanning
	qrImageSrc = fullPath

	' Optionally, create a base64 string for displaying the image (if needed)
	Dim imageBytes() As Byte = Await File.ReadAllBytesAsync(fullPath)
	Dim base64String = Convert.ToBase64String(imageBytes)
	qrImageSrcForDisplay = $"data:image/{Path.GetExtension(selectedFile.Name).TrimStart("."c)};base64,{base64String}"
End Function

以下是其功能的详细分解：

文件选择和验证：当用户上传文件时，方法使用InputFileChangeEventArgs e捕获文件的详细信息。 然后selectedFile变量被分配给这个文件，并且布尔值fileSelected设置为true，表示输入数据/文件已准备好进行处理。

创建文件路径：该方法准备一个目录来存储上传的图像。 它使用Path.Combine创建“UploadedImages”目录的路径，并使用Directory.CreateDirectory来确保其存在。 此步骤对于系统地组织上传的文件至关重要。

生成唯一文件名：为了避免与现有文件发生冲突，生成了一个唯一的文件名，该文件名使用附加了原始文件扩展名的GUID（全局唯一标识符）。 这确保每个上传的文件都有唯一标识。

保存文件：然后将文件保存到服务器。 该方法生成一个指向新生成文件路径的文件流，并使用await selectedFile.OpenReadStream().CopyToAsync(fileStream)将上传文件的内容复制到该流中。 此步骤完成了上传过程。

准备图像以供显示：文件保存后，有必要将图像显示给用户以进行确认。 该方法将文件读取到字节数组中，并转换为base64字符串，适合直接嵌入到<img>标签的src属性中。 这种转换允许图像在不需要单独请求服务器提供图像文件的情况下显示。

扫描QR码

ScanQRCode方法是Blazor Server应用中QR码扫描功能的核心。 此方法获取上传的图像并使用IronQR提取QR码数据。

private async Task ScanQRCode()
{
    // Check if there is a valid image to work with
    if (string.IsNullOrEmpty(qrImageSrc)) return;

    try
    {
        var inputBmp = AnyBitmap.FromFile(qrImageSrc);
        QrImageInput imageInput = new QrImageInput(inputBmp);
        QrReader reader = new QrReader();
        IEnumerable<QrResult> results = reader.Read(imageInput);

        // Check if there are any results and if the first result contains text
        var firstResult = results.FirstOrDefault();
        if (firstResult != null && !string.IsNullOrWhiteSpace(firstResult.Value.ToString()))
        {
            scannedText = firstResult.Value.ToString();
        }
        else
        {
            scannedText = "QR value not found!";
        }
    }
    catch (Exception ex)
    {
        scannedText = "Error scanning QR code: " + ex.Message;
    }
}

private async Task ScanQRCode()
{
    // Check if there is a valid image to work with
    if (string.IsNullOrEmpty(qrImageSrc)) return;

    try
    {
        var inputBmp = AnyBitmap.FromFile(qrImageSrc);
        QrImageInput imageInput = new QrImageInput(inputBmp);
        QrReader reader = new QrReader();
        IEnumerable<QrResult> results = reader.Read(imageInput);

        // Check if there are any results and if the first result contains text
        var firstResult = results.FirstOrDefault();
        if (firstResult != null && !string.IsNullOrWhiteSpace(firstResult.Value.ToString()))
        {
            scannedText = firstResult.Value.ToString();
        }
        else
        {
            scannedText = "QR value not found!";
        }
    }
    catch (Exception ex)
    {
        scannedText = "Error scanning QR code: " + ex.Message;
    }
}

Private Async Function ScanQRCode() As Task
	' Check if there is a valid image to work with
	If String.IsNullOrEmpty(qrImageSrc) Then
		Return
	End If

	Try
		Dim inputBmp = AnyBitmap.FromFile(qrImageSrc)
		Dim imageInput As New QrImageInput(inputBmp)
		Dim reader As New QrReader()
		Dim results As IEnumerable(Of QrResult) = reader.Read(imageInput)

		' Check if there are any results and if the first result contains text
		Dim firstResult = results.FirstOrDefault()
		If firstResult IsNot Nothing AndAlso Not String.IsNullOrWhiteSpace(firstResult.Value.ToString()) Then
			scannedText = firstResult.Value.ToString()
		Else
			scannedText = "QR value not found!"
		End If
	Catch ex As Exception
		scannedText = "Error scanning QR code: " & ex.Message
	End Try
End Function

首先，方法检查qrImageSrc变量是否不为空，该变量保存上传图像的路径。 此检查可确保在继续之前有一个有效的图像可以使用。

确认图像已准备好进行处理后，方法会继续QR码读取的核心功能。 这涉及几个关键步骤，首先是将其存储位置的图像加载到适合QR码分析的格式。 这种转换通过AnyBitmap.FromFile(qrImageSrc)方法实现，该方法准备图像进行扫描过程。

下一步是创建QrReader对象。 此对象是IronQR库的核心，用作从图像解码QR码的主要工具。 准备好QrReader实例后，应用程序随后继续扫描上传的图像。 reader.Read(imageInput)函数负责这一操作，系统地搜索图像中的QR码并提取其数据。

扫描结果存储在IEnumerable<QrResult>集合中。 然后仔细审查此集合以找到第一个QR码结果。 如果检测到QR码且其中包含可读文本，则将此文本捕获并存储在scannedText变量中。 但是，在无法找到QR码或QR码不包含文本的情况下，应用程序设置默认消息以告知用户未检测到QR值。

成功扫描QR码后，文本字符串显示在文本输入字段中，这要归功于Blazor的双向数据绑定功能。 这是通过将scannedText变量绑定到文本输入元素来实现的。 输入字段设置为禁用，使其只读。 此设计选择专注于用户的交互，以便查看结果并复制，而不是编辑内容。

整个扫描过程都封装在一个try-catch块中，以防止扫描操作期间出现任何不可预见的错误。 这可能包括与图像文件格式相关的问题或读取过程中的意外错误。 如果发生异常，它将被捕获，并策划并向用户显示一条错误消息。 这种方法有助于在保持与用户透明时跟踪问题，提高应用程序的可靠性。

复制结果

为了启用复制到剪贴板功能，在_Host.cshtml文件中定义了一个名为copyTextToClipboard的JavaScript功能。该脚本是一种简单但有效的方法来与剪贴板互动：

<script>
    function copyTextToClipboard(text) {
        navigator.clipboard.writeText(text).then(function () {
            console.log('Copying to clipboard was successful!');
        }, function (err) {
            console.error('Could not copy text: ', err);
        });
    }
</script>

<script>
    function copyTextToClipboard(text) {
        navigator.clipboard.writeText(text).then(function () {
            console.log('Copying to clipboard was successful!');
        }, function (err) {
            console.error('Could not copy text: ', err);
        });
    }
</script>

此功能接受文本参数，即要复制的文本。 它使用navigator.clipboard.writeText方法，这是一种与剪贴板交互的现代方法。 由于其简单性和符合网页标准，该方法受到青睐。 它旨在成功复制后在控制台中记录成功消息，帮助调试并确保流畅的功能。 如果出现错误，则将在控制台中记录错误消息，提供在操作过程中遇到的任何问题的见解。

@code部分的index.razor中的CopyToClipboard方法作为Blazor应用和JavaScript功能之间的桥梁。 用户界面中的一个按钮单击触发此方法 激活后，它使用Blazor的JavaScript InterOp能力调用copyTextToClipboard JavaScript功能。 scannedText作为参数传递给此功能，有效地将文本复制到用户的剪贴板。

private async Task CopyToClipboard()
{
    await JSRuntime.InvokeVoidAsync("copyTextToClipboard", scannedText);
}

private async Task CopyToClipboard()
{
    await JSRuntime.InvokeVoidAsync("copyTextToClipboard", scannedText);
}

Private Async Function CopyToClipboard() As Task
	Await JSRuntime.InvokeVoidAsync("copyTextToClipboard", scannedText)
End Function

执行应用程序

运行项目后，用户将看到以下干净且简单的界面。 初始屏幕突出显示了QR码扫描器模块。 该模块包括一个上传QR码图像文件的按钮（“选择文件”）和另一个启动扫描过程的按钮（“扫描QR码”）。 最初未选择文件，扫描区域为空，等待用户输入。

用户使用“选择文件”按钮选择并上传QR码图像，该按钮现在显示所选文件的名称（例如，“qrvalue.png”）。 上传的QR码在界面的指定区域可见，确认图像已准备好进行扫描。

用户单击“扫描QR码”按钮后，应用程序将处理图像。 如果扫描成功，QR码中编码的文本将显示在图像下方。 在这种情况下，扫描结果（'<https://ironsoftware.com/csharp/qr/>'）是一个URL，显示QR码，扫描时将用户引导至何处。 结果旁边出现了一个复制按钮，允许用户轻松地将扫描到的文本复制到剪贴板以供进一步使用。