ASP.NET Core バーコードスキャナー

前提条件

1. Visual Studio 2022 またはそれ以降（または .NET をサポートする任意の IDE）
2. .NET 6.0 以上の SDK

プロジェクトを作成する

新しい ASP.NET Core Web App (Razor Pages) プロジェクトを作成します。 これは Visual Studio のプロジェクトウィザードを通じて、またはコマンドラインから実行できます。

dotnet new webapp -n BarcodeWebApp

dotnet new webapp -n BarcodeWebApp

IronBarcode ライブラリのインストール

NuGet Package Manager Console を使用して IronBarcode ライブラリをインストールします。 Visual Studio の Tools > NuGet Package Manager > Package Manager Console に移動して、以下を実行します。

Install-Package BarCode

あるいは、コマンドラインから dotnet add package BarCode を使用してインストールします。 最新バージョンは NuGet ウェブサイトで入手できます。

フロントエンド

フロントエンドはファイルアップロードフォームと結果表示エリアで構成されます。 フォームは enctype="multipart/form-data" を使用してバイナリファイルのアップロードを処理します。 バーコードが検出されると、アップロードされた画像の下に成功のアラートで結果が表示されます。

Index.cshtml ファイルの内容を次の内容に置き換えます。

@page
@model IndexModel
@{
    ViewData["Title"] = "Barcode Scanner";
}

<div class="container mt-4">
    <h1 class="mb-4">Barcode Scanner</h1>

    <div class="card mb-4">
        <div class="card-header"><h5>Upload & Read Barcode</h5></div>
        <div class="card-body">
            <form method="post" asp-page-handler="Upload" enctype="multipart/form-data">
                <div class="mb-3">
                    <label for="file" class="form-label">Select a barcode image:</label>
                    <input type="file" class="form-control" id="file"
                           name="UploadedFile" accept="image/*" />
                </div>
                <button type="submit" class="btn btn-primary">Scan Barcode</button>
            </form>

            @if (Model.ImageDataUrl != null)
            {
                <div class="mt-3">
                    <h6>Uploaded Image:</h6>
                    <img src="@Model.ImageDataUrl" alt="Uploaded barcode"
                         style="max-width: 300px;" class="img-thumbnail" />
                </div>
            }

            @if (Model.BarcodeResult != null)
            {
                <div class="alert alert-success mt-3">
                    <strong>Barcode Value:</strong> @Model.BarcodeResult
                </div>
            }

            @if (Model.ErrorMessage != null)
            {
                <div class="alert alert-warning mt-3">@Model.ErrorMessage</div>
            }
        </div>
    </div>
</div>

@page
@model IndexModel
@{
    ViewData["Title"] = "Barcode Scanner";
}

<div class="container mt-4">
    <h1 class="mb-4">Barcode Scanner</h1>

    <div class="card mb-4">
        <div class="card-header"><h5>Upload & Read Barcode</h5></div>
        <div class="card-body">
            <form method="post" asp-page-handler="Upload" enctype="multipart/form-data">
                <div class="mb-3">
                    <label for="file" class="form-label">Select a barcode image:</label>
                    <input type="file" class="form-control" id="file"
                           name="UploadedFile" accept="image/*" />
                </div>
                <button type="submit" class="btn btn-primary">Scan Barcode</button>
            </form>

            @if (Model.ImageDataUrl != null)
            {
                <div class="mt-3">
                    <h6>Uploaded Image:</h6>
                    <img src="@Model.ImageDataUrl" alt="Uploaded barcode"
                         style="max-width: 300px;" class="img-thumbnail" />
                </div>
            }

            @if (Model.BarcodeResult != null)
            {
                <div class="alert alert-success mt-3">
                    <strong>Barcode Value:</strong> @Model.BarcodeResult
                </div>
            }

            @if (Model.ErrorMessage != null)
            {
                <div class="alert alert-warning mt-3">@Model.ErrorMessage</div>
            }
        </div>
    </div>
</div>

HTML

レイアウトはデフォルトの ASP.NET Core テンプレートに既に含まれている Bootstrap クラスを使用します。 フォームは Upload ページハンドラーに送信され、条件付きブロックによってアップロードされた画像プレビュー、デコード結果、またはエラーメッセージが表示されます。

サンプル入力バーコード

以下のサンプルバーコードを使用してスキャナーをテストできます。 各画像は異なる形式と値をエンコードしています。

QR Code にエンコードされた "https://ironsoftware.com"

Code 128 にエンコードされた "IRONBARCODE-2026"

Code 39 にエンコードされた "HELLO123"

IronBarcode を使用したバーコードスキャン

サーバー側のロジックは、アップロードされたファイルを OnPostUploadAsync メソッドで処理します。 アップロードされた IFormFile がバイト配列に読み込まれ、直接 BarcodeReader.Read に渡されます。 これにより、テンポラリファイルを保存せずに、処理を完全にメモリ内で行います。

Index.cshtml.cs の内容を以下に置き換えます。

using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
using IronBarCode;

public class IndexModel : PageModel
{
    [BindProperty]
    public IFormFile? UploadedFile { get; set; }

    public string? BarcodeResult { get; set; }
    public string? ErrorMessage { get; set; }
    public string? ImageDataUrl { get; set; }

    public void OnGet()
    {
    }

    public async Task<IActionResult> OnPostUploadAsync()
    {
        if (UploadedFile == null || UploadedFile.Length == 0)
        {
            ErrorMessage = "Please select an image file.";
            return Page();
        }

        try
        {
            using var ms = new MemoryStream();
            await UploadedFile.CopyToAsync(ms);
            byte[] imageBytes = ms.ToArray();

            // Store image as base64 for preview display
            string base64 = Convert.ToBase64String(imageBytes);
            ImageDataUrl = $"data:{UploadedFile.ContentType};base64,{base64}";

            // Read barcode from uploaded image bytes
            var results = BarcodeReader.Read(imageBytes);

            if (results != null && results.Count() > 0)
            {
                BarcodeResult = string.Join("\n",
                    results.Select(r => r.Value));
            }
            else
            {
                ErrorMessage = "No barcode detected in the uploaded image.";
            }
        }
        catch (Exception ex)
        {
            ErrorMessage = $"Error processing image: {ex.Message}";
        }

        return Page();
    }
}

using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
using IronBarCode;

public class IndexModel : PageModel
{
    [BindProperty]
    public IFormFile? UploadedFile { get; set; }

    public string? BarcodeResult { get; set; }
    public string? ErrorMessage { get; set; }
    public string? ImageDataUrl { get; set; }

    public void OnGet()
    {
    }

    public async Task<IActionResult> OnPostUploadAsync()
    {
        if (UploadedFile == null || UploadedFile.Length == 0)
        {
            ErrorMessage = "Please select an image file.";
            return Page();
        }

        try
        {
            using var ms = new MemoryStream();
            await UploadedFile.CopyToAsync(ms);
            byte[] imageBytes = ms.ToArray();

            // Store image as base64 for preview display
            string base64 = Convert.ToBase64String(imageBytes);
            ImageDataUrl = $"data:{UploadedFile.ContentType};base64,{base64}";

            // Read barcode from uploaded image bytes
            var results = BarcodeReader.Read(imageBytes);

            if (results != null && results.Count() > 0)
            {
                BarcodeResult = string.Join("\n",
                    results.Select(r => r.Value));
            }
            else
            {
                ErrorMessage = "No barcode detected in the uploaded image.";
            }
        }
        catch (Exception ex)
        {
            ErrorMessage = $"Error processing image: {ex.Message}";
        }

        return Page();
    }
}

上記のコードにおける重要な手順：

1. アップロードを受け取る - IFormFile が [BindProperty] を通じてバインドされ、POST ハンドラーで受け取られます。
2. バイトに変換する - ファイルが MemoryStream にコピーされ、バイト配列に変換されます。 このアプローチは ウェブスキャナーの例で使用されており、base64文字列の代わりに ASP.NET Core の IFormFile に適応されています。
3. バーコードを読み取る - BarcodeReader.Read(imageBytes) は画像を処理し、検出されたすべてのバーコードを返します。
4. 結果を表示する - 検出されたすべてのバーコードの値が結合され、UIに表示されます。

以下の GIF は、バーコードリーダーが動作しているシーンを示し、バーコード画像をアップロードして、デコードされた結果を表示します。

ASP.NET Core アプリケーションで、アップロードされた画像をスキャンするバーコードリーダー

Base64 画像データの処理

ウェブカメラキャプチャや JavaScriptキャンバスなどからの base64 文字列として画像データを受け取るアプリケーションでは、同じ BarcodeReader.Read メソッドが、base64 からデコードされたバイト配列で機能します。このパターンは、AJAX を介して画像データを送信するシングルページアプリケーションで一般的です。

public string ReadBarCode(string imageDataBase64)
{
    // Decode the base64 image data
    var splitObject = imageDataBase64.Split(',');
    byte[] imageByteData = Convert.FromBase64String(
        (splitObject.Length > 1) ? splitObject[1] : splitObject[0]);

    // Read barcode directly from byte array
    var results = BarcodeReader.Read(imageByteData);

    return $"{DateTime.Now}: Barcode is ({results.First().Value})";
}

public string ReadBarCode(string imageDataBase64)
{
    // Decode the base64 image data
    var splitObject = imageDataBase64.Split(',');
    byte[] imageByteData = Convert.FromBase64String(
        (splitObject.Length > 1) ? splitObject[1] : splitObject[0]);

    // Read barcode directly from byte array
    var results = BarcodeReader.Read(imageByteData);

    return $"{DateTime.Now}: Barcode is ({results.First().Value})";
}

このアプローチは、生の base64 フォーマットとデータ URI フォーマット(例: data:image/png;base64,...)の両方を処理し、カンマで分割して実際の base64 ペイロードを取得します。 このパターンを使用した完全な Blazor 実装については、Blazor インテグレーションガイドを参照してください。

サーバーでのバーコードの生成

IronBarcode はサーバー側でもバーコードを生成できます。同じアプリケーションに生成エンドポイントを追加することは、BarcodeWriter.CreateBarcode を使用して簡単です。

public IActionResult OnPostGenerate()
{
    var barcode = BarcodeWriter.CreateBarcode(
        "https://ironsoftware.com", BarcodeEncoding.QRCode);
    byte[] barcodeBytes = barcode.ToPngBinaryData();

    return File(barcodeBytes, "image/png", "generated-barcode.png");
}

public IActionResult OnPostGenerate()
{
    var barcode = BarcodeWriter.CreateBarcode(
        "https://ironsoftware.com", BarcodeEncoding.QRCode);
    byte[] barcodeBytes = barcode.ToPngBinaryData();

    return File(barcodeBytes, "image/png", "generated-barcode.png");
}

生成されたバーコードはファイルのダウンロードとして返されます。 以下の画像は、OnPostGenerate ハンドラーによって生成された QR コードの出力を示しています。

BarcodeWriter.CreateBarcode でサーバー側で生成された QR コード

バーコード生成のオプションについては、バーコード画像生成チュートリアルとバーコードスタイリングガイドを参照してください。

アプリケーションの実行

Visual Studio からまたはコマンドラインからプロジェクトを実行します。

dotnet run

dotnet run

アプリケーションは通常、launchSettings.json(通常 @https://localhost:5001 やそれに類するもの)で指定されたポート上で開始します。 ホームページに移動して、バーコードスキャナーのインターフェースを確認します。