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

Q: IronQR은 다중 QR 코드가 있는 이미지를 처리할 수 있습니까?

예, IronQR은 `QrReader.Read()`에 의해 반환되는 `IEnumerable ` 컬렉션을 반복하여 다중 QR 코드가 있는 이미지를 처리할 수 있습니다.

Updated: 2026년 3월 3일

Blazor Server는 서버에서 C#을 실행하고 SignalR 연결을 통해 브라우저로 UI 업데이트를 푸시하는 .NET 웹 프레임워크입니다. IronQR는 Blazor Server에 직접 통합되어, 브라우저 업로드 이미지를 서버 측에서 JavaScript 없이 QR 코드를 스캔할 수 있게 합니다.

이 사용 가이드에서는 IronQR을 사용하여 이미지를 업로드하고 포함된 QR 코드를 디코딩하는 Blazor Server 페이지를 구축합니다.

Blazor에서 QR 코드를 스캔하는 방법

웹에서 QR 코드를 스캔하기 위해 IronQR C# 라이브러리를 설치하세요
브라우저에서 이미지 업로드를 수락하기 위해 InputFile 컴포넌트를 추가하세요
업로드된 파일을 서버의 임시 경로로 스트리밍하세요
이미지를 로드하고 QrImageInput에 그것을 감싸세요
디코드된 값을 Blazor 컴포넌트에 표시하기 위해 Read를 호출하세요

필수 조건

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

IronQR 설치

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

PM > Install-Package IronQR

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>

@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>

Text

샘플 입력

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

Blazor QR 스캐너를 테스트하기 위해 https://ironsoftware.com을 인코딩하는 샘플 QR 코드

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

IronQR로 QR 코드 스캔

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

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

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

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

Imports IronQr
Imports IronSoftware.Drawing

Private qrImageSrc As String
Private scannedText As String = String.Empty

Private Async Function OnFileSelected(e As InputFileChangeEventArgs) As Task
    Dim file = e.File
    Dim tempPath = Path.Combine(Path.GetTempPath(), file.Name)
    Await Using stream = file.OpenReadStream(maxAllowedSize:=10000000)
        Await Using fs = File.Create(tempPath)
            Await stream.CopyToAsync(fs)
        End Using
    End Using
    qrImageSrc = tempPath
End Function

Private Async Function ScanQRCode() As Task
    ' Load the scanned QR code
    Dim inputBmp = AnyBitmap.FromFile(qrImageSrc)
    Dim imageInput = New QrImageInput(inputBmp)
    Dim reader = New QrReader()

    ' Read the scanned QR code
    Dim results = reader.Read(imageInput)

    ' Check if a result was found
    Dim firstResult = results.FirstOrDefault()
    If firstResult IsNot Nothing Then
        ' Save the QR code value as a string
        scannedText = firstResult.Value
    Else
        scannedText = "No QR code found in the selected image."
    End If
End Function

Imports IronQr
Imports IronSoftware.Drawing

Private qrImageSrc As String
Private scannedText As String = String.Empty

Private Async Function OnFileSelected(e As InputFileChangeEventArgs) As Task
    Dim file = e.File
    Dim tempPath = Path.Combine(Path.GetTempPath(), file.Name)
    Await Using stream = file.OpenReadStream(maxAllowedSize:=10000000)
        Await Using fs = File.Create(tempPath)
            Await stream.CopyToAsync(fs)
        End Using
    End Using
    qrImageSrc = tempPath
End Function

Private Async Function ScanQRCode() As Task
    ' Load the scanned QR code
    Dim inputBmp = AnyBitmap.FromFile(qrImageSrc)
    Dim imageInput = New QrImageInput(inputBmp)
    Dim reader = New QrReader()

    ' Read the scanned QR code
    Dim results = reader.Read(imageInput)

    ' Check if a result was found
    Dim firstResult = results.FirstOrDefault()
    If firstResult IsNot Nothing Then
        ' Save the QR code value as a string
        scannedText = firstResult.Value
    Else
        scannedText = "No QR code found in the selected image."
    End If
End Function

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

출력

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

IronQR를 사용하는 Blazor QR 코드 스캐너 — 페이지에 표시된 디코딩 결과

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

프로젝트 다운로드

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

결론

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

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

자주 묻는 질문

Blazor Server 애플리케이션에서 IronQR의 주요 사용은 무엇입니까?

IronQR은 주로 Blazor Server 애플리케이션에서 QR 코드 스캔을 브라우저를 통해 업로드된 이미지에서 서버 측으로 수행하게 하며, JavaScript가 필요하지 않습니다.

Blazor 프로젝트에서 IronQR 라이브러리를 어떻게 설치합니까?

Blazor 프로젝트에서 IronQR 라이브러리를 설치하기 위해 Visual Studio의 NuGet 패키지 관리자 콘솔을 사용하여 설치 명령을 실행하거나 NuGet에서 'IronQR'을 검색하여 최신 버전을 설치합니다.

Blazor에서 QR 코드 스캔을 위한 이미지 업로드를 처리하는 데 사용되는 구성 요소는 무엇입니까?

Blazor에서는 `InputFile` 구성 요소를 사용하여 이미지 업로드를 처리하며, 사용자가 QR 코드 스캔을 위해 브라우저에서 이미지를 선택할 수 있습니다.

IronQR은 Blazor 애플리케이션에서 어떻게 QR 코드를 디코딩합니까?

Blazor 애플리케이션에서 IronQR은 선택된 이미지를 `AnyBitmap`에 로드한 뒤 `QrReader.Read()`를 사용하여 QR 코드 데이터를 추출하고 표시합니다.

IronQR은 다중 QR 코드가 있는 이미지를 처리할 수 있습니까?

예, IronQR은 `QrReader.Read()`에 의해 반환되는 `IEnumerable` 컬렉션을 반복하여 다중 QR 코드가 있는 이미지를 처리할 수 있습니다.

IronQR을 사용하여 Blazor에서 QR 코드 스캔을 구현하는 데 JavaScript가 필요합니까?

아니요, Blazor에서 IronQR을 사용하여 QR 코드 스캔을 구현하는 데 JavaScript는 필요하지 않으며, 전체 프로세스가 서버 측에서 처리됩니다.

IronQR 스캔 프로세스에서 `AnyBitmap`의 역할은 무엇입니까?

`AnyBitmap`은 업로드된 파일의 이미지 형식을 디코딩하여 IronQR을 통한 QR 코드 읽기를 준비합니다.

Blazor에서 QR 코드 스캔 결과를 어떻게 표시합니까?

Blazor는 구성 요소의 UI 내에 있는 단락 요소에 디코딩된 값을 렌더링하여 QR 코드 스캔 결과를 표시합니다.

Blazor 스캐너에서 QR 코드가 없는 이미지를 업로드하면 어떻게 됩니까?

QR 코드가 없는 이미지를 업로드하면 `FirstOrDefault`를 `QrReader.Read()`에 의해 반환되는 `IEnumerable`에 호출하여 예외를 일으키지 않고 상황을 안전하게 처리합니다.

전체 Blazor QR 스캐너 프로젝트를 다운로드하는 것이 가능합니까?

예, 가이드 웹 페이지에 제공된 링크에서 전체 Blazor QR 스캐너 프로젝트를 다운로드할 수 있습니다.

Curtis Chau

지금 바로 엔지니어링 팀과 채팅하세요

기술 문서 작성자

커티스 차우는 칼턴 대학교에서 컴퓨터 과학 학사 학위를 취득했으며, Node.js, TypeScript, JavaScript, React를 전문으로 하는 프론트엔드 개발자입니다. 직관적이고 미적으로 뛰어난 사용자 인터페이스를 만드는 데 열정을 가진 그는 최신 프레임워크를 활용하고, 잘 구성되고 시각적으로 매력적인 매뉴얼을 제작하는 것을 즐깁니다.

...

더 읽어보기