动态

详情 返回 返回

在 ASP.NET 中用 C# 實現二維碼與條碼掃描 - 动态 详情

二維碼和條碼在現代應用中承擔着重要的信息承載與快速讀取作用,從線上支付、快遞物流到票務驗證,都離不開高效的掃描功能。在 Web 項目中,我們可以利用 ASP.NET Core 提供的文件上傳機制,結合 Free Spire.Barcode for .NET 的識別能力,實現一個輕量、即用型的掃碼工具。

接下來,我們將構建一個 Razor Pages 項目,實現圖片上傳後即時解析二維碼或條碼,並在瀏覽器端顯示結果。整個過程不需要將圖片寫入磁盤,而是直接在內存流中進行識別,提升了性能和安全性。

項目準備與依賴安裝

首先,新建一個 Razor Pages 應用:

dotnet new webapp -n BarcodeReaderApp

然後通過 NuGet 安裝 Free Spire.Barcode for .NET

dotnet add package FreeSpire.Barcode

安裝完成後,即可在項目中引用 BarcodeScanner 類來處理二維碼和條碼識別。

後端實現內存流掃碼

在後端的 IndexModel 中,我們接收用户上傳的文件,通過 IFormFile.OpenReadStream() 獲取文件流,然後直接調用 BarcodeScanner.Scan() 方法識別,無需保存臨時文件。同時,我們將文件轉為 Base64 字符串返回給前端用於預覽。

using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
using Spire.Barcode;

public class IndexModel : PageModel
{
    [BindProperty]
    public IFormFile Upload { get; set; }  // 上傳的文件

    public string Result { get; set; }     // 掃描結果
    public string UploadedImageBase64 { get; set; } // 預覽用 Base64

    public void OnPost()
    {
        if (Upload != null && Upload.Length > 0)
        {
            try
            {
                // 轉換為 Base64 供前端預覽
                using (var ms = new MemoryStream())
                {
                    Upload.CopyTo(ms);
                    UploadedImageBase64 = "data:" + Upload.ContentType + ";base64," +
                                          Convert.ToBase64String(ms.ToArray());

                    // 使用流直接掃描二維碼或條碼
                    ms.Position = 0; // 重置流位置
                    string[] scanned = BarcodeScanner.Scan(ms);

                    Result = scanned != null && scanned.Length > 0
                        ? string.Join(", ", scanned)
                        : "未檢測到二維碼或條碼。";
                }
            }
            catch (Exception ex)
            {
                Result = "掃描失敗:" + ex.Message;
            }
        }
    }
}

説明

  • Scan() 方法既支持傳入 Stream 對象,也支持直接傳入 文件路徑字符串,使用方式靈活。
  • 如果需要獲取更詳細的信息(如二維碼/條碼類型、在圖像中的位置等),可以使用 ScanInfo() 方法,它會返回包含這些屬性的結果對象。
  • 無論是 Scan() 還是 ScanInfo(),都會掃描圖像中存在的所有二維碼或條碼,並返回完整的結果集合。

相比保存文件到磁盤的方式,這種直接使用流的方式可以減少 IO 開銷,也避免了對臨時文件的清理操作,更適合在雲端或高併發場景中使用。

前端頁面與交互設計

前端同樣使用 Razor Pages 模板,文件上傳時自動提交表單,並在收到結果後顯示圖片和識別內容,提供複製功能方便用户使用。

@page
@model IndexModel
@{
    ViewData["Title"] = "二維碼與條碼掃描器";
}

<div style="max-width:420px;margin:40px auto;padding:20px;border:1px solid #ccc;border-radius:8px;background:#f9f9f9;">
    <h2>二維碼與條碼掃描器</h2>
    <form method="post" enctype="multipart/form-data">
        <input type="file" name="upload" accept="image/*" required onchange="this.form.submit()" style="margin:10px 0;" />
    </form>

    @if (!string.IsNullOrEmpty(Model.UploadedImageBase64))
    {
        <div style="margin-top:15px;text-align:center;">
            <img src="@Model.UploadedImageBase64" style="width:300px;height:300px;object-fit:contain;border:1px solid #ddd;background:#fff;" />
        </div>
    }

    @if (!string.IsNullOrEmpty(Model.Result))
    {
        <div style="margin-top:15px;padding:10px;background:#e8f5e9;border-radius:6px;">
            <b>掃描結果:</b>
            <p id="scanText">@Model.Result</p>
            <button type="button" onclick="navigator.clipboard.writeText(scanText.innerText)" style="background:#28a745;color:#fff;padding:6px 10px;border:none;border-radius:4px;">複製</button>
        </div>
    }
</div>

頁面特點:

  • 上傳文件後無需點擊按鈕即可觸發解析。
  • 實時顯示上傳圖片的縮略圖。
  • 識別結果可直接複製,方便粘貼到其他地方。

頁面及二維碼識別效果
ASP.NET掃描二維碼

總結

本文演示瞭如何在 ASP.NET Core Razor Pages 項目中實現二維碼與條碼掃描,並通過內存流直接識別圖片內容,省去了保存臨時文件的步驟。這種實現不僅結構簡潔,而且性能更高,適合部署在需要快速響應的 Web 應用中。藉助 Spire.Barcode for .NET 的多格式支持以及 Scan()ScanInfo() 提供的靈活接口,開發者能夠方便地掃描圖像中的所有條碼,並獲取必要的附加信息,從而在電商、物流、票務、企業文檔等場景中高效處理掃碼業務。

更多二維碼、條碼操作技巧請查看Spire.Barcode for .NET官方教程。

user avatar kaidiwen 头像 GreenShade 头像
点赞 2 用户, 点赞了这篇动态!
点赞

Add a new 评论

Some HTML is okay.