BlazorでQRコードを生成する方法

以下の手順は、Blazorサーバーアプリケーションで最適な方法でQRコードを生成するのに役立ちます：

Blazor HTMLコンポーネントの追加

最初に、"Index.razor"ページにいくつかのHTMLコードを追加します。 コードは、いくつかの見出し、入力フィールド、およびボタンで構成されています。

以下のコードを使用してBlazorバーコードアプリにコンポーネントを追加します：

<h4>Welcome to Blazor QR Code Generator</h4>
<p>Enter the value to Generate QR Code:</p>

<input @bind="text" />

<button @onclick="QRCodeGenerater">Generate QR Code</button>

<p>Generated QR Code:</p>

<h4>Welcome to Blazor QR Code Generator</h4>
<p>Enter the value to Generate QR Code:</p>

<input @bind="text" />

<button @onclick="QRCodeGenerater">Generate QR Code</button>

<p>Generated QR Code:</p>

出力は以下の通りです。

テキスト フィールドはユーザーからの入力を取得するために使用され、生成ボタンは QRCodeGenerater メソッドを呼び出して QR コードを作成します。 作成されたQRコードは"生成されたQRコード："の見出しの下に表示されます。 それでは、QRCodeGenerater メソッドを作成しましょう。

QRCodeGenerater メソッドを作成する

強力なIronBarcodeライブラリをVisual Studioで使用してQRコードを生成する時が来ました。 "Index. Razor"ページに @code セクションが追加されました。 まず、以下の完全なコードを見てみましょう：

@code {
    // Variable to hold the generated QR code HTML
    private string qrCode = "";

    // Variable to hold user input text
    private string text = "";

    // Method to generate QR code from user input
    private void QRCodeGenerater()
    {
        // Create a QR code from the input text
        GeneratedBarcode myQRCode = QRCodeWriter.CreateQrCode(text);

        // Convert the generated QR code to HTML tag
        qrCode = Convert.ToString(myQRCode.ToHtmlTag());
    }
}

上記のコードでは、2つのプライベート文字列変数があります。 qrCode は生成された QR コードを表示し、text は入力フィールドからユーザー入力を取得します。 次に、QRCodeGenerater メソッドで、QRCodeWriter クラスの CreateQrCode メソッドを使用して myQRCode が作成されます。 CreateQrCode メソッドは、コード出力を強化するためのいくつかのパラメータを提供します。 QR コードのサイズをカスタマイズしたり、エラー訂正レベルを維持するためのエラー訂正コードワードを設定したり、QrVersion を変更したりできます。 以下のコードで他のパラメーターも操作する手助けをします：

// Creating a QR code with custom parameters
QRCodeWriter.CreateQrCode(
    "https://ironsoftware.com/csharp/barcode/", // URL for the QR code
    500, // Size of the QR code
    QRCodeWriter.QrErrorCorrectionLevel.High, // Error correction level
    0 // QrVersion
)

// Creating a QR code with custom parameters
QRCodeWriter.CreateQrCode(
    "https://ironsoftware.com/csharp/barcode/", // URL for the QR code
    500, // Size of the QR code
    QRCodeWriter.QrErrorCorrectionLevel.High, // Error correction level
    0 // QrVersion
)

最後に、生成されたBlazorバーコードは HTML タグに変換され、次に qrCode 文字列に変換されます。

このコード例ページでIronBarcode機能の詳細を取得します。

Blazorサーバーアプリケーションのホームページに表示

"Razor"ページの HTML コンポーネントに、H4 見出しの後に以下のコードを追加して、qrCode を表示します。

@((MarkupString)qrCode)

PNGファイルとして保存

SaveAsPng メソッドを使用して PNG ファイルに保存することもできます。

// Save the generated QR code as a PNG file
myQRCode.SaveAsPng("myQRCode.png");

// Save the generated QR code as a PNG file
myQRCode.SaveAsPng("myQRCode.png");