How To Create a Blazor QR Code Scanner

什么是Blazor服务器？

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

IronQR简介

IronQR是一个.NET库，因其能够以高精度读取、解释和生成QR码而脱颖而出。 它提供了一系列功能，包括处理不同类型的QR码内容的能力。 IronQR的优势在于其简单性和易于集成到.NET应用中，使其成为开发人员希望整合和创建QR码功能时的理想选择。

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

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

如何创建Blazor二维码扫描器：图 1 - 查找要实现的正确模板

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

如何创建Blazor二维码扫描器：图 2 - 配置项目详情

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

如何创建Blazor二维码扫描器：图 3 - 选择.NET Framework并创建项目

安装IronQR库

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

如何创建Blazor二维码扫描器：图 4 - 访问NuGet包管理器

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

如何创建Blazor二维码扫描器：图 5 - 通过"浏览"选项卡安装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> 组件上传二维码图片。 该元素专为仅接受图像文件而设计，通过筛除不相关的文件类型来增强用户体验。

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

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

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

在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:应用于二维码图像的样式包括尺寸限制和自动居中边距，使图像突出但不至于过于醒目。

.result-section:此类确保结果部分中的元素居中对齐并适当间距。

处理文件上传

HandleSelectedFile 方法是二维码扫描过程中的关键部分，用于处理用户的文件上传并准备进行扫描。 当用户通过 <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}";
}

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

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

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

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

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

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

扫描QR码

ScanQRCode 方法是Blazor Server 应用程序中二维码扫描功能的核心。 此方法获取上传的图像并使用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;
    }
}

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

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

下一步是创建一个 QrReader 对象。 此对象是IronQR库的核心，用作从图像解码QR码的主要工具。 QrReader 实例准备就绪后，应用程序将继续扫描上传的图像。 reader.Read(imageInput) 函数负责执行此操作，它会有条不紊地搜索图像中的二维码并提取其数据。

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

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

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

复制结果

为了启用复制到剪贴板功能，在 @@--CODE-382--CODE-381 --CODE-382 文件中定义了一个名为 @@--CODE-381--CODE-381的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 方法，这是一种与剪贴板交互的现代方法。 由于其简单性和符合网页标准，该方法受到青睐。 它旨在成功复制后在控制台中记录成功消息，帮助调试并确保流畅的功能。 如果出现错误，则将在控制台中记录错误消息，提供在操作过程中遇到的任何问题的见解。

Razor的 CopyToClipboard 方法位于 @code 部分，充当Blazor应用和JavaScript函数之间的桥梁。 用户界面中的一个按钮单击触发此方法 激活后，它会使用 Blazor 的JavaScript互操作功能调用 copyTextToClipboard JavaScript函数。 将 scannedText 作为参数传递给此函数，从而有效地将文本复制到用户的剪贴板。

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

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

执行应用程序

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

如何创建Blazor二维码扫描器：图 6 - 项目初始执行结果

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

如何创建Blazor二维码扫描器：图 7 - 用户输入二维码的结果

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

如何创建Blazor二维码扫描器：图 8 - 此图显示了二维码中的文本和复制按钮