ASP.NET Core(C#)でQRコードを生成しブラウザに表示する #C#

はじめに

C#でQRコードを生成しブラウザに表示するコードのサンプルです。

環境は、ASP.NET Core Razor Pages + .NET 6です。

ソースファイルは、GitHubで公開しています。
https://github.com/gushwell/QRCodeSample

ASP.NET Core プロジェクトの作成

Visual Studioを使い、ASP.NET Coreのプロジェクトを作成します。

Visual Studio 2022 を起動し、 [新しいプロジェクトの作成] を選択します。
[新しいプロジェクトの作成] ダイアログで、 [ASP.NET Core Web アプリ] を選んで、プロジェクトを作成します。
フレームワークを選択するダイアログでは、[.NET 6.0] を選択します。

Visual Studio Codeの場合は、以下のコマンドをタイプします。

dotnet new webapp -o QrCodeExample

-o パラメータではプロジェクトの名前を指定します。ここでは、QrCodeExampleとしました。

NuGetを使いQRCoderパッケージインストールする

QRCoderは、C＃.NETで記述されたQRコードを作成するライブラリです。とても簡単なコードで、QRコードを生成できます。.NET Framework にも、.NET Core系にも対応しています。

NuGetパッケージマネージャーを使いQRCoderパケージをインストールします。
csprojファイルに、以下の記述を追加します。Visual Studio の NuGetの機能を使ってインストールしてもOKです。

  <ItemGroup>
      <PackageReference Include="QRCoder" Version="1.4.3" />
  </ItemGroup>

HTMLで画像を表示する方法

今回は、HTMLのimgタグに直接QRコードの画像データを埋め込むことにします。

以下のように、画像のbyte配列のデータをBase64にしてsrc属性に記述してあげることで、画像をHTMLに埋め込むことができます。

<img src="data:image/png;base64,{base64文字列}">

QRコードを生成するコードを書く

ここでは、Index.cshtml.cs のOnGetメソッドに、QRコードを生成するコードを記述することにします。

まずは、index.cshtml.csに、ImageSrcというプロパティを定義します。

public class IndexModel : PageModel
{
...
	public string ImageSrc { get; set; } = String.Empty;

...
}

このImageSrcプロパティに、"data:image/png;base64,Qk1MAA......" といった文字列を格納し、Index.cshtmlの中でバインドさせることにします。

次に、OnGetメソッドを以下のように書き換えます。

	public IActionResult OnGet()
	{
		var text = "https://qiita.com/gushwell";
		var qrGenerator = new QRCodeGenerator();
		var qrCodeData = qrGenerator.CreateQrCode(text, QRCodeGenerator.ECCLevel.Q);
		var qrCode = new PngByteQRCode(qrCodeData);
		var bytes = qrCode.GetGraphic(10);
        var base64Str = Convert.ToBase64String(bytes);
		ImageSrc = String.Format("data:image/png;base64,{0}", base64Str);
		return Page();
	}
}

ここでは、話を単純化するために固定的な文字列をQRコードに変換しています。

cshtmlファイルを変更

index.cshtmlファイルにimgタグを追加します。

QRコードを表示するだけのページなので、以下のような<img>タグがあればあとは何でもOKです。

<div class="text-center">
    <h1 class="display-4">Welcome</h1>
    <img src="@Model.ImageSrc" />
</div>

@Model.ImageSrcが、IndexModelのImageSrcプロパティの内容に置き換えられます。

実行する

以下のようなページが表示されればOKです。