はじめに
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です。
