ASP.NET Core バーコードスキャナー
はじめに
ASP.NET Core は、モダンなウェブアプリケーションを構築するためのクロスプラットフォームフレームワークです。 その Razor ページモデルは、HTTP リクエストを処理するためのページベースのアプローチを提供し、サーバー側のバーコード処理に適しています。 IronBarcode を使用すると、アップロードされた画像を IFormFile オブジェクトとして受け取り、バイト配列に変換し、ディスクに一時ファイルを書き込むことなく BARCODE リーダーに直接渡すことができます。
この記事では、IronBarcode を ASP.NET Core Razor Pages アプリケーションに統合し、アップロードされた画像からバーコードや QR コードをスキャンし、サーバーからバーコードを生成する方法を解説します。
ASP.NET Core でバーコードを読み取る & スキャンする方法
- C#ライブラリをインストールしてバーコードを読み取り、スキャンします
- 新しい ASP.NET Core Razor Pages プロジェクトを作成します。
- バーコード画像を受け取るためのファイルアップロードフォームをデザインします。
- アップロードされた画像にバーコードをスキャンするために
Readメソッドを使用します。 - ページにデコードされたバーコードの値を表示します。
IronBarcode: C# バーコードライブラリ
IronBarcode は、.NET アプリケーションでバーコードの読み取りと書き込みを行うための堅牢な API を提供します。 このライブラリは内部で画像処理を処理するため、開発者は別途画像処理ライブラリを用意することなく、生のバイトデータ、ファイルパス、またはストリームを BarcodeReader.Read メソッドに直接渡すことができます。 QR Code、Code 128、Code 39、PDF417、EAN など、多くのバーコード形式をサポートしています。
ウェブアプリケーション向けの IronBarcode は、完全にメモリ内で画像を処理するため、特に便利です。 アップロードされたファイルをディスクに保存する必要がなく、デプロイが簡単になり、クリーンアップの負担が軽減されます。 このライブラリは BarcodeWriter.CreateBarcode によるBARCODE生成機能も備えており、読み取りと書き込みの両方に対応する単一の依存関係となります。
ASP.NET Core でバーコードスキャナーを構築する手順
ASP.NET Core Razor Pages と IronBarcode を使用して、ウェブベースのバーコードスキャナーを作成するために、次の手順に従ってください。
前提条件
- Visual Studio 2022 またはそれ以降(または .NET をサポートする任意の IDE)
- .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>
レイアウトはデフォルトの 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();
}
}
Imports Microsoft.AspNetCore.Mvc
Imports Microsoft.AspNetCore.Mvc.RazorPages
Imports IronBarCode
Imports System.IO
Imports System.Threading.Tasks
Public Class IndexModel
Inherits PageModel
<BindProperty>
Public Property UploadedFile As IFormFile
Public Property BarcodeResult As String
Public Property ErrorMessage As String
Public Property ImageDataUrl As String
Public Sub OnGet()
End Sub
Public Async Function OnPostUploadAsync() As Task(Of IActionResult)
If UploadedFile Is Nothing OrElse UploadedFile.Length = 0 Then
ErrorMessage = "Please select an image file."
Return Page()
End If
Try
Using ms As New MemoryStream()
Await UploadedFile.CopyToAsync(ms)
Dim imageBytes As Byte() = ms.ToArray()
' Store image as base64 for preview display
Dim base64 As String = Convert.ToBase64String(imageBytes)
ImageDataUrl = $"data:{UploadedFile.ContentType};base64,{base64}"
' Read barcode from uploaded image bytes
Dim results = BarcodeReader.Read(imageBytes)
If results IsNot Nothing AndAlso results.Count() > 0 Then
BarcodeResult = String.Join(vbLf, results.Select(Function(r) r.Value))
Else
ErrorMessage = "No barcode detected in the uploaded image."
End If
End Using
Catch ex As Exception
ErrorMessage = $"Error processing image: {ex.Message}"
End Try
Return Page()
End Function
End Class
上記のコードにおける重要な手順:
- アップロードの受信 -
IFormFileは[BindProperty]を通じてバインドされ、POST ハンドラーで受信されます。 - バイトへの変換 - ファイルは
MemoryStreamにコピーされ、バイト配列に変換されます。 これは、Webスキャナーの例で使用されたのと同じアプローチであり、base64文字列の代わりにASP.NET CoreのIFormFileに対応するように適応されています。 - BARCODE を読み取る -
BarcodeReader.Read(imageBytes)は画像を処理し、検出されたすべての BARCODE を返します。 - 結果を表示する - 検出されたすべてのバーコードの値が結合され、UIに表示されます。
以下の GIF は、バーコードリーダーが動作しているシーンを示し、バーコード画像をアップロードして、デコードされた結果を表示します。
ASP.NET Core アプリケーションで、アップロードされた画像をスキャンするバーコードリーダー
Base64 画像データの処理
画像データを base64 文字列として受け取るアプリケーション(例:Web カメラのキャプチャや JavaScript の canvas など)の場合、同じ 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})";
}
Public Function ReadBarCode(imageDataBase64 As String) As String
' Decode the base64 image data
Dim splitObject = imageDataBase64.Split(","c)
Dim imageByteData As Byte() = Convert.FromBase64String(
If(splitObject.Length > 1, splitObject(1), splitObject(0)))
' Read barcode directly from byte array
Dim results = BarcodeReader.Read(imageByteData)
Return $"{DateTime.Now}: Barcode is ({results.First().Value})"
End Function
このアプローチでは、カンマで分割して実際のBase64ペイロードを取り出すことで、生のBase64形式とデータURI形式(例:data:image/png;base64,...)の両方を処理します。 このパターンを使用した完全な Blazor 実装については、Blazor インテグレーションガイドを参照してください。
サーバーでのバーコードの生成
IronBarcodeはサーバーサイドでのBARCODE生成も可能です。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");
}
Public Function OnPostGenerate() As IActionResult
Dim barcode = BarcodeWriter.CreateBarcode("https://ironsoftware.com", BarcodeEncoding.QRCode)
Dim barcodeBytes As Byte() = barcode.ToPngBinaryData()
Return File(barcodeBytes, "image/png", "generated-barcode.png")
End Function
生成されたバーコードはファイルのダウンロードとして返されます。 以下の画像は、OnPostGenerate ハンドラーによって生成されたQRコードの出力を示しています:
BarcodeWriter.CreateBarcode でサーバー側で生成された QR コード
バーコード生成のオプションについては、バーコード画像生成チュートリアルとバーコードスタイリングガイドを参照してください。
アプリケーションの実行
Visual Studio からまたはコマンドラインからプロジェクトを実行します。
dotnet run
dotnet run
アプリケーションは、https://localhost:5001など)で起動します。 ホームページに移動して、バーコードスキャナーのインターフェースを確認します。
結論
この記事では、ASP.NET Core Razor Pages と IronBarcode を使用して、サーバー側でバーコードスキャナーを構築する方法を紹介しました。 同じアプローチは、ASP.NET Core MVC コントローラー、Web API エンドポイント、および Blazor サーバーアプリケーションとも連携し、画像データの受信方法を適応させることができます。 IronBarcode は画像処理を内部で処理するため、ウェブフレームワークに関係なく、統合には最小限のコードが必要です。
他の .NET プラットフォームでバーコードを読み取るためには、.NET MAUI バーコードスキャナーチュートリアルとバーコードの読み取り方法ガイドを参照してください。 IronBarcode のチュートリアルをさらに入手するには、バーコード読み取りチュートリアルを参照してください。
To get started quickly, download the complete BarcodeWebApp project and run it with dotnet run.
IronBarcode は、開発および商業使用にライセンスされる必要があります。 ライセンスの詳細はこちらでご覧いただけます。
よくある質問
Razor Pages を使用して ASP.NET Core でバーコードスキャナーを実装するにはどうすればいいですか?
ASP.NET Core Razor Pages プロジェクトで IronBarcode を使用してバーコードスキャナーを実装できます。このライブラリを使用すると、QR コード、Code 128、Code 39 などのさまざまなバーコードフォーマットを読み取ることができ、画像をアップロードして BarcodeReader.Read で処理します。
IronBarcode を使用してどのような種類のバーコードを読むことができますか?
IronBarcode は QR コード、Code 128、Code 39 などの複数のバーコードフォーマットを読み取ることができ、さまざまなアプリケーションに対応します。
ASP.NET Core プロジェクトでバーコードスキャンのために画像をアップロードするにはどうすればよいですか?
ASP.NET Core プロジェクトでは、IFormFile を使用して画像をアップロードできます。IronBarcode はこれらの画像を処理して内部のバーコードを読み取ります。
IronBarcode で ASP.NET Core のサーバー側でバーコードを生成できますか?
はい、IronBarcode は ASP.NET Core において BarcodeWriter.CreateBarcode メソッドを使用してサーバーサイドでバーコードを生成することができ、動的にバーコードを作成して表示させます。
BarcodeReader.Read メソッドは何に使われますか?
IronBarcode の BarcodeReader.Read メソッドは画像からバーコードをデコードするために使用され、ASP.NET Core においてバーコードスキャナーを実装する上で重要な部分です。
ASP.NET Core で同じライブラリを使用して QR コードとバーコードの両方をスキャンすることは可能ですか?
はい、IronBarcode を使用すると、同じ ASP.NET Core アプリケーション内で QR コードとさまざまな他のバーコードフォーマットをスキャンすることができ、統一されたソリューションを提供します。
C# でのバーコードスキャンにおいて IronBarcode を使用する利点は何ですか?
IronBarcode は、簡単な統合、複数のバーコードフォーマットのサポート、堅牢なサーバー側バーコード生成機能を提供しており、C# アプリケーションでのバーコードスキャンにおいて効率的な選択です。
IronBarcode は 1D と 2D の両方のバーコードを処理できますか?
IronBarcode は 1D および 2D の両方のバーコードを処理でき、単純な製品ラベリングから複雑なデータエンコーディングまで幅広いアプリケーションに対応しています。
IronBarcode の商業用途のライセンスオプションはありますか?
Iron Software は、IronBarcode のために企業レベルのアプリケーションに適した商業ライセンスを含むさまざまなライセンスオプションを提供し、ビジネス要件への準拠を確保します。
IronBarcodeはバーコードのバッチ処理をサポートしていますか?
はい、IronBarcode はバッチ処理をサポートしており、開発者が単一の操作で複数のバーコードを生成または読み取ることを可能にし、大規模アプリケーションの効率を高めます。

