.NET MAUI QRコードスキャナ

前提条件

1. .NET MAUIのワークロードがインストールされたVisual Studio 2022
2. AndroidまたはiOSをターゲットにした.NET MAUIプロジェクト

IronQRのインストール

Visual StudioのNuGetパッケージマネージャーコンソールを使用してIronQRライブラリをインストールします。 Tools > NuGet Package Manager > Package Manager Console に移動し、以下を実行してください：

Install-Package IronQR

あるいは、NuGet で IronQR を検索し、最新バージョンをインストールしてください。

フロントエンドデザイン

スキャナのUIは画像選択をトリガーするためのボタン、選択したQRコードをプレビューするための画像ビュー、デコードされた結果を表示するためのラベルで構成されます。

MainPage.xaml の内容を以下に置き換えてください：

<?xml version="1.0" encoding="utf-8"?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MauiQrScanner.MainPage">

    <ScrollView>
        <VerticalStackLayout
            Spacing="25"
            Padding="30,0"
            VerticalOptions="Center">

            <Button
                x:Name="scanButton"
                Text="Select QR Code Image"
                SemanticProperties.Hint="Select Image"
                Clicked="OnScanButtonClicked"
                HorizontalOptions="Center" />

            <Image
                x:Name="qrImage"
                SemanticProperties.Description="Selected QR Code"
                HeightRequest="200"
                HorizontalOptions="Center" />

            <Label
                x:Name="resultLabel"
                Text="Scanned Text: "
                HorizontalOptions="Center"
                VerticalOptions="Center" />

        </VerticalStackLayout>
    </ScrollView>

</ContentPage>

<?xml version="1.0" encoding="utf-8"?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MauiQrScanner.MainPage">

    <ScrollView>
        <VerticalStackLayout
            Spacing="25"
            Padding="30,0"
            VerticalOptions="Center">

            <Button
                x:Name="scanButton"
                Text="Select QR Code Image"
                SemanticProperties.Hint="Select Image"
                Clicked="OnScanButtonClicked"
                HorizontalOptions="Center" />

            <Image
                x:Name="qrImage"
                SemanticProperties.Description="Selected QR Code"
                HeightRequest="200"
                HorizontalOptions="Center" />

            <Label
                x:Name="resultLabel"
                Text="Scanned Text: "
                HorizontalOptions="Center"
                VerticalOptions="Center" />

        </VerticalStackLayout>
    </ScrollView>

</ContentPage>

サンプル入力

以下のQRコードをテスト画像として使用します。 それをデバイスに保存し、アプリのファイルピッカーを通じて選択します。 デコードされた値は https://ironsoftware.com の形式で表示される必要があります。

サンプルQRコード — https://ironsoftware.comをエンコード

IronQRによるQRコードスキャン

スキャンボタンをタップすると、FilePickerがデバイスの画像ライブラリを開きます。 ユーザーが写真を選択すると、そのフルパスが AnyBitmap に読み込まれ、QrReader.Read() に渡されます。 最初に検出されたQRコードからデコードされた値が結果ラベルに表示されます。

MainPage.xaml.cs に以下のメソッドを追加してください：

using IronQr;
using IronSoftware.Drawing;

private async void OnScanButtonClicked(object sender, EventArgs e)
{
    // Start scanning QR codes
    var images = await FilePicker.Default.PickAsync(new PickOptions
    {
        PickerTitle = "Pick image",
        FileTypes = FilePickerFileType.Images
    });
    var imageSource = images.FullPath.ToString();

    var inputBmp = AnyBitmap.FromFile(imageSource);

    // Load the asset into QrImageInput
    QrImageInput imageInput = new QrImageInput(inputBmp);

    // Create a QR Reader object
    QrReader reader = new QrReader();

    // Read the input and get all embedded QR Codes
    IEnumerable<QrResult> results = reader.Read(imageInput);

    // Display the first result
    resultLabel.Text = "Scanned Text: " + results.First().Value;
}

using IronQr;
using IronSoftware.Drawing;

private async void OnScanButtonClicked(object sender, EventArgs e)
{
    // Start scanning QR codes
    var images = await FilePicker.Default.PickAsync(new PickOptions
    {
        PickerTitle = "Pick image",
        FileTypes = FilePickerFileType.Images
    });
    var imageSource = images.FullPath.ToString();

    var inputBmp = AnyBitmap.FromFile(imageSource);

    // Load the asset into QrImageInput
    QrImageInput imageInput = new QrImageInput(inputBmp);

    // Create a QR Reader object
    QrReader reader = new QrReader();

    // Read the input and get all embedded QR Codes
    IEnumerable<QrResult> results = reader.Read(imageInput);

    // Display the first result
    resultLabel.Text = "Scanned Text: " + results.First().Value;
}

Imports IronQr
Imports IronSoftware.Drawing

Private Async Sub OnScanButtonClicked(sender As Object, e As EventArgs)
    ' Start scanning QR codes
    Dim images = Await FilePicker.Default.PickAsync(New PickOptions With {
        .PickerTitle = "Pick image",
        .FileTypes = FilePickerFileType.Images
    })
    Dim imageSource = images.FullPath.ToString()

    Dim inputBmp = AnyBitmap.FromFile(imageSource)

    ' Load the asset into QrImageInput
    Dim imageInput As New QrImageInput(inputBmp)

    ' Create a QR Reader object
    Dim reader As New QrReader()

    ' Read the input and get all embedded QR Codes
    Dim results As IEnumerable(Of QrResult) = reader.Read(imageInput)

    ' Display the first result
    resultLabel.Text = "Scanned Text: " & results.First().Value
End Sub

FilePicker.Default.PickAsync は MAUI プラットフォーム抽象化レイヤーによって提供され、プラットフォーム固有のコードを一切使用せずに Android、iOS、および Windows で動作します。 AnyBitmap.FromFile は画像のデコードを処理し、QrReader.Read は画像内で検出された QR コードごとに 1 つのエントリを含む IEnumerable<QrResult> を返します。

出力

QRコード画像を選択すると、スキャンがトリガーされます。 デコードされた値が画像プレビューの下の結果ラベルに表示されます。

QRコードを選択して、デコードされた値を結果ラベルに表示します