Blazor에서 QR 코드 스캐너를 구축하는 방법

필수 조건

1. ASP.NET 및 웹 개발 작업로드가 설치된 Visual Studio 2022
2. .NET 8 이상을 타겟으로 하는 Blazor Server 프로젝트

IronQR 설치

Visual Studio의 NuGet 패키지 관리 콘솔을 사용하여 IronQR 라이브러리를 설치하세요. Tools > NuGet Package Manager > Package Manager Console로 이동하여 실행하십시오:

Install-Package IronQR

또는 NuGet에서 IronQR를 검색하여 최신 버전을 설치하십시오.

Blazor 컴포넌트 레이아웃

스캐너 UI는 Blazor의 기본 내장 InputFile 구성 요소를 사용하여 브라우저 네이티브 파일 선택, 스캔을 트리거하는 버튼, 디코딩된 결과를 표시하는 단락을 제공합니다. JavaScript 상호 운용성이 필요하지 않습니다.

다음 마크업으로 새 Razor 구성 요소 Scanner.razor을 추가하십시오:

@page "/scanner"
@using IronQr
@using IronSoftware.Drawing

<h3>QR Code Scanner</h3>

<InputFile OnChange="OnFileSelected" accept="image/*" />

<br /><br />

<button @onclick="ScanQRCode" disabled="@(qrImageSrc == null)">Scan QR Code</button>

<p>Result: @scannedText</p>

샘플 입력

아래 QR 코드를 테스트 이미지로 사용하세요. 장치에 저장하고, 앱 내의 파일 선택기를 통해 업로드한 후 Scan QR Code를 클릭하세요. 디코드된 값은 https://ironsoftware.com로 표시되어야 합니다.

표본 QR 코드 — `https://ironsoftware.com`을 인코딩

IronQR로 QR 코드 스캔

파일이 선택되면, OnFileSelected가 브라우저 업로드를 서버의 임시 파일로 스트림합니다. 스캔 버튼이 클릭되면, ScanQRCode가 파일을 AnyBitmap에 로드하고, 이를 QrReader.Read()에 전달하며, 처음 디코드된 값을 scannedText에 기록하여 Blazor가 자동으로 컴포넌트에 렌더링합니다.

다음 @code 블록을 Scanner.razor에 추가하십시오:

:path=/static-assets/qr/content-code-examples/how-to/blazor-qr-code-scanner.cs

using IronQr;
using IronSoftware.Drawing;

private string? qrImageSrc;
private string scannedText = string.Empty;

private async Task OnFileSelected(InputFileChangeEventArgs e)
{
    var file = e.File;
    var tempPath = Path.Combine(Path.GetTempPath(), file.Name);
    await using var stream = file.OpenReadStream(maxAllowedSize: 10_000_000);
    await using var fs = File.Create(tempPath);
    await stream.CopyToAsync(fs);
    qrImageSrc = tempPath;
}

private async Task ScanQRCode()
{
    // Load the scanned QR code
    var inputBmp = AnyBitmap.FromFile(qrImageSrc!);
    var imageInput = new QrImageInput(inputBmp);
    var reader = new QrReader();

    // Read the scanned QR code
    var results = reader.Read(imageInput);

    // Check if a result was found
    var firstResult = results.FirstOrDefault();
    if (firstResult != null)
    {
        // Save the QR code value as a string
        scannedText = firstResult.Value;
    }
    else
    {
        scannedText = "No QR code found in the selected image.";
    }
}

InputFile.OpenReadStream는 업로드된 바이트를 서버 측 임시 파일로 직접 스트림합니다. AnyBitmap.FromFile는 이미지 형식을 디코드하고, QrReader.Read는 발견된 QR 코드당 하나의 항목을 포함하는 IEnumerable<QrResult>를 반환합니다. FirstOrDefault는 예외를 던지지 않고 QR 코드가 없는 이미지를 안전하게 처리합니다.

출력

QR 코드 이미지를 선택하고 Scan QR Code를 클릭한 후, 디코드된 값은 컨트롤 아래 결과 단락에 렌더링됩니다.

Blazor 구성 요소에서 디코딩된 QR 코드 값 표시

프로젝트 다운로드

완전한 BlazorQrScanner 프로젝트를 다운로드하려면 여기를 클릭하세요.

결론

IronQR은 JavaScript 없이 Blazor 서버 응용 프로그램에 통합됩니다. InputFile는 브라우저 네이티브 파일 선택을 제공하고, QrReader.Read는 전적으로 서버에서 디코딩을 처리합니다. 동일한 패턴은 FirstOrDefault를 호출하는 대신 전체 결과 컬렉션을 반복하여 이미지당 여러 QR 코드를 스캔하는 것으로 확장됩니다.

QR 코드 읽기 및 사용 가능한 스캔 모드에 대한 자세한 내용은 이미지에서 QR 코드 읽기 및 스캔 모드로 QR 코드 읽기 가이드를 참조하세요.