.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;
}

FilePicker.Default.PickAsync은(는) MAUI 플랫폼 추상화 계층에 의해 제공되며, 안드로이드, iOS 및 윈도우에서 플랫폼 특정 코드 없이 작동합니다. AnyBitmap.FromFile은(는) 이미지 디코딩을 처리하고, QrReader.Read은(는) 이미지에서 발견된 각 QR 코드당 하나의 항목이 있는 IEnumerable<QrResult>을 반환합니다.

산출

QR 코드 이미지 선택은 스캔을 트리거합니다. 디코딩된 값은 이미지 미리보기 아래의 결과 레이블에 나타납니다.

선택된 QR 코드와 디코딩된 값이 결과 레이블에 표시됨