二維碼和條碼在現代應用中承擔着重要的信息承載與快速讀取作用,從線上支付、快遞物流到票務驗證,都離不開高效的掃描功能。在 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 Core Razor Pages 項目中實現二維碼與條碼掃描,並通過內存流直接識別圖片內容,省去了保存臨時文件的步驟。這種實現不僅結構簡潔,而且性能更高,適合部署在需要快速響應的 Web 應用中。藉助 Spire.Barcode for .NET 的多格式支持以及 Scan() 和 ScanInfo() 提供的靈活接口,開發者能夠方便地掃描圖像中的所有條碼,並獲取必要的附加信息,從而在電商、物流、票務、企業文檔等場景中高效處理掃碼業務。
更多二維碼、條碼操作技巧請查看Spire.Barcode for .NET官方教程。