この記事では、IronQRという.NETライブラリを使用して、Blazorアプリケーションにクイックレスポンスコードスキャナー（QRコードスキャナー）を統合する方法を探求します。 QRコードは通常の1次元バーコードよりも多くのデータを格納できる2次元バーコードです。

MicrosoftのフレームワークであるBlazorは、（Blazor WebAssemblyアプリを使用して）シングルページアプリケーションを作成するか、C#を使用してインタラクティブなウェブインターフェイスを構築することを開発者に可能にします（本ガイドではBlazor Serverに焦点を当てます）。

QRコードスキャン用のBlazor ServerとのIronQRの統合は、どちらの技術の強みを活かした戦略的な組み合わせです。 IronQRをBlazorアプリケーションと統合することで、効率的にQRコードの生成とスキャンを行うことができます。 QRコードリーダーのこの機能は、在庫管理、チケットシステム、非接触情報共有など、さまざまなビジネスコンテキストで需要が高まっています。

基本を理解する

Blazor サーバーとは何ですか？

Blazor Serverは、ASP.NET Coreプラットフォームの一部であるウェブアプリケーションフレームワークです。 これにより、開発者はJavaScriptの代わりにC#を使用してインタラクティブなウェブUIを構築できます。 このサーバーサイドモデルは、SignalR接続を介したユーザーインタラクションを処理することで動作し、リアルタイムのウェブ機能を提供します。 これにより、開発者は効果的でインタラクティブなウェブアプリを作成することができます。

IronQRの紹介

IronQRは、QRコードを高精度で読み取り、解釈し、生成する能力で際立つ.NETライブラリです。 さまざまな種類のQRコードコンテンツを処理する機能を含む一連の機能を提供します。 IronQRの強みはそのシンプルさと.NETアプリケーションへの統合のしやすさにあり、QRコード機能を組み込み、作成しようとする開発者にとって頼りになる選択肢となっています。

Blazor QRコードスキャナーの作成方法

1. Visual Studio CodeでBlazorサーバーアプリケーションを作成
2. NuGetパッケージマネージャーを使用してQRコードクラスライブラリをインストール
3. index.razorでHTMLとCSSを使用してユーザーインターフェイスを作成
4. アップロードされたファイル処理ロジックを記述
5. QRライブラリを使用してQRスキャンロジックを記述
6. 結果をテキストボックスに表示

環境の設定

新しいBlazorサーバーアプリケーションの作成

Visual Studioを開始し、"新しいプロジェクトを作成"を選択します。プロジェクトテンプレート選択画面で"Blazor Server App"テンプレートを見つけて選択します。 次へをクリックします。

テンプレートを選択したら、プロジェクト名と場所を入力し（他の値をデフォルトとして保持し）、次のボタンをクリックします。

希望 for .NETフレームワークを選択し、作成ボタンを押します。 これにより、Blazorサーバーアプリケーションが作成されます。

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

メニューバーからツールをクリックします。 ドロップダウンメニューからNuGetパッケージマネージャーを選択します。 コンテキストメニューから"ソリューションのNuGetパッケージを管理"を選択します。 これにより、NuGetパッケージマネージャータブが開きます。

NuGetパッケージマネージャーで、"IronQR"を"参照"タブ内で検索します。 リスト内の"IronQR"パッケージを見つけ、インストールボタンをクリックします。

すべてのインストールが完了したので、プロジェクトの構造全体を通じてプロジェクトにすべてを実装してください。

QRコードスキャンの実装

ユーザーインターフェイスの構築

QRコードスキャナーのユーザーインターフェイスは、主にIndex.razorファイル内で構築されます。このファイルは、Blazorサーバープロジェクトの一部であり、HTMLとRazor構文の組み合わせを使用して動的でインタラクティブなWebページを作成します。 構造には以下が含まれます：

@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>

@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>

タイトルと見出し: <h1>タグは、それぞれページのタイトルとメインの見出しを定義し、ユーザーにコンテキストを設定します。

画像アップロードコントロール: QRコード画像をアップロードするために<InputFile>コンポーネントを使用します。 この要素は画像ファイルのみを受け入れるように調整されており、無関係なファイルタイプをフィルタリングすることでユーザーエクスペリエンスを向上させます。

画像表示: 画像がアップロードされると、<img>タグを使用して表示されます。 この視覚的フィードバックは、適切なファイルがアップロードされたことをユーザーに確認させるのに重要です。

スキャンボタン: @onclick="ScanQRCode"でタグ付けされたボタンがスキャンプロセスを開始します。 ファイルが選択されているかどうかに応じて利用可能になり、インターフェースの直感性が向上します。

**結果表示：**スキャンされたQRコードのテキストが、見やすいようにテキスト入力フィールドに表示されます。 別のボタンを使用して、このテキストをクリップボードにコピーできます。

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 {
    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: QRコード画像にはサイズ制約と自動マージンが適用され、センタリングされ、画像が目立ちすぎないようにしています。

.result-section: このクラスは、結果セクション内の要素が中央に揃い、適切に間隔が空けられていることを保証します。

ファイルアップロードの処理

QRコードのスキャンプロセスの重要な部分である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}";
}

Private Async Function HandleSelectedFile(ByVal e As InputFileChangeEventArgs) As Task
	selectedFile = e.File
	fileSelected = True
	Dim imagesDirectory = Path.Combine(Directory.GetCurrentDirectory(), "UploadedImages")
	Directory.CreateDirectory(imagesDirectory) ' Ensure the directory exists

	' Use a GUID as the unique file name
	Dim uniqueFileName = Guid.NewGuid().ToString() & Path.GetExtension(selectedFile.Name)
	Dim fullPath = Path.Combine(imagesDirectory, uniqueFileName)

'INSTANT VB TODO TASK: Local functions are not converted by Instant VB:
'	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)
	Dim imageBytes() As Byte = Await File.ReadAllBytesAsync(fullPath)
	Dim base64String = Convert.ToBase64String(imageBytes)
	qrImageSrcForDisplay = $"data:image/{Path.GetExtension(selectedFile.Name).TrimStart("."c)};base64,{base64String}"
End Function

Private Async Function HandleSelectedFile(ByVal e As InputFileChangeEventArgs) As Task
	selectedFile = e.File
	fileSelected = True
	Dim imagesDirectory = Path.Combine(Directory.GetCurrentDirectory(), "UploadedImages")
	Directory.CreateDirectory(imagesDirectory) ' Ensure the directory exists

	' Use a GUID as the unique file name
	Dim uniqueFileName = Guid.NewGuid().ToString() & Path.GetExtension(selectedFile.Name)
	Dim fullPath = Path.Combine(imagesDirectory, uniqueFileName)

'INSTANT VB TODO TASK: Local functions are not converted by Instant VB:
'	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)
	Dim imageBytes() As Byte = Await File.ReadAllBytesAsync(fullPath)
	Dim base64String = Convert.ToBase64String(imageBytes)
	qrImageSrcForDisplay = $"data:image/{Path.GetExtension(selectedFile.Name).TrimStart("."c)};base64,{base64String}"
End Function

その機能の詳細な内訳は次のとおりです：

ファイルの選択と検証: ユーザーがファイルをアップロードすると、メソッドはInputFileChangeEventArgs eを使用してファイルの詳細をキャプチャします。 その後、このファイルにfileSelectedがtrueに設定されます。

**ファイルパスの作成：**このメソッドは、アップロードされた画像を保存するためのディレクトリを準備します。 'UploadedImages'ディレクトリへのパスを作成するためにDirectory.CreateDirectoryで存在を保証します。 このステップは、体系的にアップロードされたファイルを組織するために重要です。

**一意のファイル名の生成：**既存のファイルとの競合を避けるため、元のファイルの拡張子にGUID（グローバル一意識別子）を付加して一意のファイル名を生成します。 これにより、アップロードされた各ファイルが一意に識別されるようになります。

**ファイルの保存：**ファイルはサーバーに保存されます。 このメソッドは、新しく生成されたファイルパスを指すファイルストリームを作成し、アップロードされたファイルの内容をawait selectedFile.OpenReadStream().CopyToAsync(fileStream)を使用してこのストリームにコピーします。 このステップは、アップロードプロセスを終了します。

**画像の表示準備：**ファイルが保存された後、確認のために画像をユーザーに表示する必要があります。 このメソッドは、ファイルをバイト配列に読み込み、base64文字列に変換し、src属性に直接埋め込むのに適しています。 この変換により、画像ファイルのためにサーバーへの別要求を必要とせずに画像を表示できます。

QRコードのスキャン

Blazor ServerアプリケーションでQRコードのスキャン機能の核心であるScanQRCodeメソッドです。 このメソッドは、アップロードされた画像を取得し、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;
    }
}

Private Async Function ScanQRCode() As Task
	' Check if there is a valid image to work with
	If String.IsNullOrEmpty(qrImageSrc) Then
		Return
	End If

	Try
		Dim inputBmp = AnyBitmap.FromFile(qrImageSrc)
		Dim imageInput As New QrImageInput(inputBmp)
		Dim reader As New QrReader()
		Dim results As IEnumerable(Of QrResult) = reader.Read(imageInput)

		' Check if there are any results and if the first result contains text
		Dim firstResult = results.FirstOrDefault()
		If firstResult IsNot Nothing AndAlso Not String.IsNullOrWhiteSpace(firstResult.Value.ToString()) Then
			scannedText = firstResult.Value.ToString()
		Else
			scannedText = "QR value not found!"
		End If
	Catch ex As Exception
		scannedText = "Error scanning QR code: " & ex.Message
	End Try
End Function

Private Async Function ScanQRCode() As Task
	' Check if there is a valid image to work with
	If String.IsNullOrEmpty(qrImageSrc) Then
		Return
	End If

	Try
		Dim inputBmp = AnyBitmap.FromFile(qrImageSrc)
		Dim imageInput As New QrImageInput(inputBmp)
		Dim reader As New QrReader()
		Dim results As IEnumerable(Of QrResult) = reader.Read(imageInput)

		' Check if there are any results and if the first result contains text
		Dim firstResult = results.FirstOrDefault()
		If firstResult IsNot Nothing AndAlso Not String.IsNullOrWhiteSpace(firstResult.Value.ToString()) Then
			scannedText = firstResult.Value.ToString()
		Else
			scannedText = "QR value not found!"
		End If
	Catch ex As Exception
		scannedText = "Error scanning QR code: " & ex.Message
	End Try
End Function

最初に、アップロードされた画像のパスを保持するqrImageSrc変数が空でないことを確認します。 このチェックにより、処理するための有効な画像があることが確認されます。

画像を処理する準備が整ったことが確認されると、メソッドはQRコード読み取りの核心的な機能に進みます。 これは、画像をその保存場所からQRコード解析に適した形式にロードすることから始まるいくつかの主要なステップを含みます。 この変換は、スキャンプロセスの準備のためのAnyBitmap.FromFile(qrImageSrc)メソッドによって可能になります。

次のステップでは、QrReaderオブジェクトを作成します。 このオブジェクトはIronQRライブラリの基本ツールであり、画像からQRコードをデコードする主要なツールです。 QrReaderインスタンスの準備ができた状態で、アプリケーションはアップロードされた画像のスキャンを進めます。 このアクションを担当するreader.Read(imageInput)関数です。画像を体系的に検索し、QRコードを抽出してデータを取得します。

スキャンの結果はIEnumerable<QrResult>コレクションに格納されます。 このコレクションはその後、最初のQRコード結果を見つけるために精査されます。 QRコードが検出され、読み取り可能なテキストが含まれている場合、このテキストはscannedText変数にキャプチャして格納されます。 ただし、QRコードが見つからなかったり、テキストが含まれていなかったりするシナリオでは、アプリケーションはユーザーにQR値が検出されなかったことを知らせるデフォルトメッセージを設定します。

QRコードが正常にスキャンされると、テキスト文字列がテキスト入力フィールドに表示されます。これは、Blazorの双方向データバインディング機能によるものです。 これはscannedText変数をテキスト入力要素にバインドすることで実現します。 入力フィールドは無効に設定され、読み取り専用にします。 この設計上の選択は、ユーザーのインタラクションを結果の閲覧とコピーに集中させることを目的とし、内容を編集することを抑えます。

スキャンプロセス全体はtry-catchブロック内に囲まれており、スキャン操作中に予期しないエラーが発生しないように保護されています。 これには、画像ファイル形式に関連する問題や読み取りプロセス中の予期しないエラーが含まれる場合があります。 例外が発生した場合、それはキャッチされ、エラーメッセージがフォーミュレートされ、ユーザーに表示されます。 このアプローチは、問題を追跡するのに役立ち、ユーザーに透明性を保つことで、アプリケーションの信頼性を向上させます。

結果のコピー

クリップボードへのコピー機能を有効にするには、copyTextToClipboard という名前 for 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 メソッドを使用します。 この方法はそのシンプルさとWeb標準への準拠性のために好まれています。 成功したコピー時にコンソールに成功メッセージをログするように設計されており、デバッグを支援し、スムーズな機能を保証します。 エラーが発生した場合、それに関するエラーメッセージがコンソールに記録され、操作中に遭遇した問題についての洞察を提供します。

index.razorのCopyToClipboard メソッドは、BlazorアプリとJavaScript関数の間の橋渡しをします。 ボタンはユーザーインターフェイス内でこのメソッドのクリックをトリガーします。 有効化されると、Blazor for JavaScript InterOp機能を使用してcopyTextToClipboardJavaScript関数を呼び出します。 これはscannedTextを引数としてこの関数に渡し、効果的にテキストをユーザーのクリップボードにコピーします。

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

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

Private Async Function CopyToClipboard() As Task
	Await JSRuntime.InvokeVoidAsync("copyTextToClipboard", scannedText)
End Function

Private Async Function CopyToClipboard() As Task
	Await JSRuntime.InvokeVoidAsync("copyTextToClipboard", scannedText)
End Function

アプリケーションの実行

プロジェクトを実行すると、ユーザーは次のクリーンでシンプルなインターフェースを目にします。 初期画面には、QRコードスキャナーモジュールが目立つように表示されています。 このモジュールには、QRコード画像ファイルをアップロードするためのボタン（"ファイルを選択"）とスキャンプロセスを開始するためのボタン（"QRコードをスキャン"）が含まれています。 初期画面にはQRコードスキャナーモジュールが表示されています。

ユーザーは"ファイルを選択"ボタンを使用してQRコード画像を選択してアップロードしました。"qrvalue.png"などの選択されたファイルの名前が表示されます。 アップロードされたQRコードはインターフェース上の指定された領域に表示され、ユーザーに画像がスキャンの準備が整ったことを確認させます。

ユーザーが"QRコードをスキャン"ボタンをクリックすると、アプリケーションが画像を処理します。 スキャンが成功した場合、QRコード内にエンコードされたテキストが画像のすぐ下に表示されます。 この場合、スキャン済みの結果（'<https://ironsoftware.com/csharp/qr/>'）は、QRリーダーでスキャンされたときにユーザーがどこに案内されるかを示すURLです。 結果の隣にはコピーのボタンが表示されており、ユーザーはこのテキストをクリップボードに簡単にコピーできます。

結論

要約すると、IronQRをBlazorサーバーアプリケーションに統合するプロセスはスムーズで効果的であり、QRコードスキャンソリューションをもたらします。 このプロジェクトの設定からそのスキャン機能の実装に至るまで、IronQRの強力な処理とBlazorの動的UIレンダリングの組み合わせによる、レスポンシブで使いやすい方法です。 環境の設定からデプロイメントまでのプロセスは、現実世界のアプリケーションにおけるこの統合の実用性と効果を強調しています。 IronQRはQRコードに適していますが、バーコード機能を必要とするプロジェクトには、IronBarcodeが類似の使いやすさと統合を提供する理想的な選択肢となっています。

IronQRは、その機能を購入前に探求するための無料試用版を開発者に提供しています。 生産でそのすべてのプロフェッショナルな機能にアクセスし、拡張利用するために、IronQRライセンスは$999から開始します。