ASP.NET Core 바코드 스캐너

This article was translated from English: Does it need improvement?
Translated
View the article in English

소개

ASP.NET Core는 현대적인 웹 애플리케이션을 구축하기 위한 크로스 플랫폼 프레임워크입니다. 그의 Razor Pages 모델은 HTTP 요청을 처리하는 페이지 기반 접근 방식을 제공하여 서버 측 바코드 처리에 적합합니다. IronBarcode로 업로드된 이미지는 IFormFile 객체로 수신되어 바이트 배열로 변환되고, 임시 파일을 디스크에 쓰지 않고 직접 바코드 리더에 전달될 수 있습니다.

이 기사에서는 ASP.NET Core Razor Pages 애플리케이션에 IronBarcode를 통합하여 업로드된 이미지에서 바코드 및 QR 코드를 스캔하고, 서버에서 바코드를 생성하는 방법을 설명합니다.

IronBarcode: C# 바코드 라이브러리

IronBarcode는 .NET 애플리케이션에서 바코드를 읽고 쓰기 위한 견고한 API를 제공합니다. 라이브러리는 이미지 처리를 내부적으로 처리하므로 개발자는 별도의 이미지 처리 라이브러리 없이 BarcodeReader.Read 메서드에 원시 바이트, 파일 경로, 또는 스트림을 직접 전달할 수 있습니다. QR Code, Code 128, Code 39, PDF417, EAN 등 다양한 바코드 형식을 지원합니다.

웹 애플리케이션용으로 IronBarcode는 특히 유용한데, 이는 전적으로 메모리에서 이미지를 처리하기 때문입니다. 업로드된 파일은 디스크에 저장할 필요가 없어 배포를 단순화하고 정리 작업을 줄여줍니다. 같은 라이브러리는 BarcodeWriter.CreateBarcode와 함께 바코드를 생성하므로 읽기와 쓰기를 위한 단일 종속성이 됩니다.

ASP.NET Core에서 바코드 스캐너 구축 단계

ASP.NET Core Razor Pages와 IronBarcode를 사용하여 웹 기반 바코드 스캐너를 만드는 단계를 따르십시오.

필수 조건

  1. Visual Studio 2022 또는 이후 버전 (또는 .NET 지원 IDE)
  2. .NET 6.0 또는 이후 버전 SDK

프로젝트 생성

새 ASP.NET Core 웹 앱 (Razor Pages) 프로젝트를 생성합니다. 이 작업은 Visual Studio의 프로젝트 마법사나 명령줄을 통해 수행할 수 있습니다:

dotnet new webapp -n BarcodeWebApp
dotnet new webapp -n BarcodeWebApp
SHELL

IronBarcode 라이브러리 설치

NuGet Package Manager Console을 사용하여 IronBarcode 라이브러리를 설치합니다. Visual Studio에서 Tools > NuGet Package Manager > Package Manager Console로 이동하여 실행하세요:

Install-Package BarCode

또는 명령줄에서 dotnet add package BarCode로 설치하세요. 최신 버전은 NuGet 웹사이트에서 이용 가능합니다.

프론트엔드

프론트엔드는 파일 업로드 양식과 결과 표시 영역으로 구성됩니다. 양식은 바이너리 파일 업로드를 처리하기 위해 enctype="multipart/form-data"를 사용합니다. 바코드가 감지되면 결과는 업로드된 이미지 아래에 성공 알림으로 나타납니다.

Index.cshtml 파일의 내용을 다음으로 교체하세요:

@page
@model IndexModel
@{
    ViewData["Title"] = "Barcode Scanner";
}

<div class="container mt-4">
    <h1 class="mb-4">Barcode Scanner</h1>

    <div class="card mb-4">
        <div class="card-header"><h5>Upload & Read Barcode</h5></div>
        <div class="card-body">
            <form method="post" asp-page-handler="Upload" enctype="multipart/form-data">
                <div class="mb-3">
                    <label for="file" class="form-label">Select a barcode image:</label>
                    <input type="file" class="form-control" id="file"
                           name="UploadedFile" accept="image/*" />
                </div>
                <button type="submit" class="btn btn-primary">Scan Barcode</button>
            </form>

            @if (Model.ImageDataUrl != null)
            {
                <div class="mt-3">
                    <h6>Uploaded Image:</h6>
                    <img src="@Model.ImageDataUrl" alt="Uploaded barcode"
                         style="max-width: 300px;" class="img-thumbnail" />
                </div>
            }

            @if (Model.BarcodeResult != null)
            {
                <div class="alert alert-success mt-3">
                    <strong>Barcode Value:</strong> @Model.BarcodeResult
                </div>
            }

            @if (Model.ErrorMessage != null)
            {
                <div class="alert alert-warning mt-3">@Model.ErrorMessage</div>
            }
        </div>
    </div>
</div>
@page
@model IndexModel
@{
    ViewData["Title"] = "Barcode Scanner";
}

<div class="container mt-4">
    <h1 class="mb-4">Barcode Scanner</h1>

    <div class="card mb-4">
        <div class="card-header"><h5>Upload & Read Barcode</h5></div>
        <div class="card-body">
            <form method="post" asp-page-handler="Upload" enctype="multipart/form-data">
                <div class="mb-3">
                    <label for="file" class="form-label">Select a barcode image:</label>
                    <input type="file" class="form-control" id="file"
                           name="UploadedFile" accept="image/*" />
                </div>
                <button type="submit" class="btn btn-primary">Scan Barcode</button>
            </form>

            @if (Model.ImageDataUrl != null)
            {
                <div class="mt-3">
                    <h6>Uploaded Image:</h6>
                    <img src="@Model.ImageDataUrl" alt="Uploaded barcode"
                         style="max-width: 300px;" class="img-thumbnail" />
                </div>
            }

            @if (Model.BarcodeResult != null)
            {
                <div class="alert alert-success mt-3">
                    <strong>Barcode Value:</strong> @Model.BarcodeResult
                </div>
            }

            @if (Model.ErrorMessage != null)
            {
                <div class="alert alert-warning mt-3">@Model.ErrorMessage</div>
            }
        </div>
    </div>
</div>
HTML

레이아웃은 이미 기본 ASP.NET Core 템플릿에 포함된 Bootstrap 클래스를 사용합니다. 양식은 Upload 페이지 핸들러에 제출되며, 조건부 블록은 업로드된 이미지 미리보기, 디코딩된 결과 또는 오류 메시지를 표시합니다.

샘플 입력 바코드

다음의 샘플 바코드는 스캐너를 테스트하는 데 사용할 수 있습니다. 각 이미지는 서로 다른 형식과 값을 인코딩합니다:

ASP.NET Core 바코드 스캐너 - URL을 인코딩한 샘플 QR 코드 입력

https://ironsoftware.com" 인코딩된 QR 코드

ASP.NET Core Barcode Scanner - Sample Code 128 barcode input

코드 128 바코드 인코딩 `IronBarcode-2026`

ASP.NET Core Barcode Scanner - Sample Code 39 barcode input

"HELLO123" 인코딩된 Code 39 바코드

IronBarcode로 바코드 스캔하기

서버 측 논리는 OnPostUploadAsync 메서드에서 업로드된 파일을 처리합니다. 업로드된 IFormFile는 바이트 배열로 읽혀 직계 BarcodeReader.Read에 전달됩니다. 이는 임시 파일 저장을 피하고 처리를 전적으로 메모리에서 유지합니다.

Index.cshtml.cs의 내용을 다음으로 교체하세요:

using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
using IronBarCode;

public class IndexModel : PageModel
{
    [BindProperty]
    public IFormFile? UploadedFile { get; set; }

    public string? BarcodeResult { get; set; }
    public string? ErrorMessage { get; set; }
    public string? ImageDataUrl { get; set; }

    public void OnGet()
    {
    }

    public async Task<IActionResult> OnPostUploadAsync()
    {
        if (UploadedFile == null || UploadedFile.Length == 0)
        {
            ErrorMessage = "Please select an image file.";
            return Page();
        }

        try
        {
            using var ms = new MemoryStream();
            await UploadedFile.CopyToAsync(ms);
            byte[] imageBytes = ms.ToArray();

            // Store image as base64 for preview display
            string base64 = Convert.ToBase64String(imageBytes);
            ImageDataUrl = $"data:{UploadedFile.ContentType};base64,{base64}";

            // Read barcode from uploaded image bytes
            var results = BarcodeReader.Read(imageBytes);

            if (results != null && results.Count() > 0)
            {
                BarcodeResult = string.Join("\n",
                    results.Select(r => r.Value));
            }
            else
            {
                ErrorMessage = "No barcode detected in the uploaded image.";
            }
        }
        catch (Exception ex)
        {
            ErrorMessage = $"Error processing image: {ex.Message}";
        }

        return Page();
    }
}
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
using IronBarCode;

public class IndexModel : PageModel
{
    [BindProperty]
    public IFormFile? UploadedFile { get; set; }

    public string? BarcodeResult { get; set; }
    public string? ErrorMessage { get; set; }
    public string? ImageDataUrl { get; set; }

    public void OnGet()
    {
    }

    public async Task<IActionResult> OnPostUploadAsync()
    {
        if (UploadedFile == null || UploadedFile.Length == 0)
        {
            ErrorMessage = "Please select an image file.";
            return Page();
        }

        try
        {
            using var ms = new MemoryStream();
            await UploadedFile.CopyToAsync(ms);
            byte[] imageBytes = ms.ToArray();

            // Store image as base64 for preview display
            string base64 = Convert.ToBase64String(imageBytes);
            ImageDataUrl = $"data:{UploadedFile.ContentType};base64,{base64}";

            // Read barcode from uploaded image bytes
            var results = BarcodeReader.Read(imageBytes);

            if (results != null && results.Count() > 0)
            {
                BarcodeResult = string.Join("\n",
                    results.Select(r => r.Value));
            }
            else
            {
                ErrorMessage = "No barcode detected in the uploaded image.";
            }
        }
        catch (Exception ex)
        {
            ErrorMessage = $"Error processing image: {ex.Message}";
        }

        return Page();
    }
}
Imports Microsoft.AspNetCore.Mvc
Imports Microsoft.AspNetCore.Mvc.RazorPages
Imports IronBarCode
Imports System.IO
Imports System.Threading.Tasks

Public Class IndexModel
    Inherits PageModel

    <BindProperty>
    Public Property UploadedFile As IFormFile

    Public Property BarcodeResult As String
    Public Property ErrorMessage As String
    Public Property ImageDataUrl As String

    Public Sub OnGet()
    End Sub

    Public Async Function OnPostUploadAsync() As Task(Of IActionResult)
        If UploadedFile Is Nothing OrElse UploadedFile.Length = 0 Then
            ErrorMessage = "Please select an image file."
            Return Page()
        End If

        Try
            Using ms As New MemoryStream()
                Await UploadedFile.CopyToAsync(ms)
                Dim imageBytes As Byte() = ms.ToArray()

                ' Store image as base64 for preview display
                Dim base64 As String = Convert.ToBase64String(imageBytes)
                ImageDataUrl = $"data:{UploadedFile.ContentType};base64,{base64}"

                ' Read barcode from uploaded image bytes
                Dim results = BarcodeReader.Read(imageBytes)

                If results IsNot Nothing AndAlso results.Count() > 0 Then
                    BarcodeResult = String.Join(vbLf, results.Select(Function(r) r.Value))
                Else
                    ErrorMessage = "No barcode detected in the uploaded image."
                End If
            End Using
        Catch ex As Exception
            ErrorMessage = $"Error processing image: {ex.Message}"
        End Try

        Return Page()
    End Function
End Class
$vbLabelText   $csharpLabel

위 코드의 주요 단계:

  1. 업로드 수신 - IFormFile[BindProperty]를 통해 바인딩되어 POST 핸들러에서 수신됩니다.
  2. 바이트로 변환 - 파일은 MemoryStream로 복사되어 바이트 배열로 변환됩니다. 이것은 웹 스캐너 예제에서 사용된 것과 같은 접근법이며, base64 문자열 대신 ASP.NET Core의 IFormFile에 맞게 조정되었습니다.
  3. 바코드 읽기 - BarcodeReader.Read(imageBytes)는 이미지를 처리하고 감지된 모든 바코드를 반환합니다.
  4. 결과 표시 - 감지된 모든 바코드 값이 합쳐져 UI에 표시됩니다.

다음 GIF는 바코드 판독기가 작동하는 모습을 보여줍니다. 바코드 이미지를 업로드하고 해석된 결과를 표시합니다:

ASP.NET Core 바코드 스캐너 - 바코드 업로드 및 읽기 시연

ASP.NET Core 응용 프로그램에서 업로드된 이미지를 스캔하는 바코드 판독기

Base64 이미지 데이터 처리

웹캠 캡처 또는 JavaScript 캔버스에서와 같이 base64 문자열로 이미지 데이터를 받는 애플리케이션에는 동일한 BarcodeReader.Read 메서드가 base64에서 디코딩된 바이트 배열로 동작합니다. 이 패턴은 AJAX를 통해 이미지 데이터를 전송하는 단일 페이지 애플리케이션에서 일반적입니다:

public string ReadBarCode(string imageDataBase64)
{
    // Decode the base64 image data
    var splitObject = imageDataBase64.Split(',');
    byte[] imageByteData = Convert.FromBase64String(
        (splitObject.Length > 1) ? splitObject[1] : splitObject[0]);

    // Read barcode directly from byte array
    var results = BarcodeReader.Read(imageByteData);

    return $"{DateTime.Now}: Barcode is ({results.First().Value})";
}
public string ReadBarCode(string imageDataBase64)
{
    // Decode the base64 image data
    var splitObject = imageDataBase64.Split(',');
    byte[] imageByteData = Convert.FromBase64String(
        (splitObject.Length > 1) ? splitObject[1] : splitObject[0]);

    // Read barcode directly from byte array
    var results = BarcodeReader.Read(imageByteData);

    return $"{DateTime.Now}: Barcode is ({results.First().Value})";
}
Public Function ReadBarCode(imageDataBase64 As String) As String
    ' Decode the base64 image data
    Dim splitObject = imageDataBase64.Split(","c)
    Dim imageByteData As Byte() = Convert.FromBase64String(
        If(splitObject.Length > 1, splitObject(1), splitObject(0)))

    ' Read barcode directly from byte array
    Dim results = BarcodeReader.Read(imageByteData)

    Return $"{DateTime.Now}: Barcode is ({results.First().Value})"
End Function
$vbLabelText   $csharpLabel

이 접근법은 쉼표로 분할하여 실제 base64 페이로드를 가져오는 방식으로 원시 base64 및 데이터 URI 형식(e.g., data:image/png;base64,...) 모두를 처리합니다. 이 패턴을 사용하는 완전한 Blazor 구현은 Blazor 통합 가이드를 참조하세요.

서버에서 바코드 생성

IronBarcode는 서버 측에서 바코드를 생성할 수도 있습니다. BarcodeWriter.CreateBarcode와 함께 같은 애플리케이션에 생성 엔드포인트를 추가하는 것은 간단합니다:

public IActionResult OnPostGenerate()
{
    var barcode = BarcodeWriter.CreateBarcode(
        "https://ironsoftware.com", BarcodeEncoding.QRCode);
    byte[] barcodeBytes = barcode.ToPngBinaryData();

    return File(barcodeBytes, "image/png", "generated-barcode.png");
}
public IActionResult OnPostGenerate()
{
    var barcode = BarcodeWriter.CreateBarcode(
        "https://ironsoftware.com", BarcodeEncoding.QRCode);
    byte[] barcodeBytes = barcode.ToPngBinaryData();

    return File(barcodeBytes, "image/png", "generated-barcode.png");
}
Public Function OnPostGenerate() As IActionResult
    Dim barcode = BarcodeWriter.CreateBarcode("https://ironsoftware.com", BarcodeEncoding.QRCode)
    Dim barcodeBytes As Byte() = barcode.ToPngBinaryData()

    Return File(barcodeBytes, "image/png", "generated-barcode.png")
End Function
$vbLabelText   $csharpLabel

생성된 바코드는 파일 다운로드로 반환됩니다. 다음 이미지는 OnPostGenerate 핸들러가 생성한 QR 코드 출력을 보여줍니다:

ASP.NET Core 바코드 스캐너 - 서버에서 생성된 QR 코드 출력

BarcodeWriter.CreateBarcode로 생성된 서버 측 QR 코드

더 많은 바코드 생성 옵션을 보려면 바코드 이미지 생성 튜토리얼바코드 스타일링 가이드를 참조하세요.

애플리케이션 실행

Visual Studio 또는 명령줄에서 프로젝트를 실행하세요:

dotnet run
dotnet run
SHELL

애플리케이션은 launchSettings.json에 지정된 포트(일반적으로 https://localhost:5001 또는 이와 유사)에 시작됩니다. 홈페이지로 이동하여 바코드 스캐너 인터페이스를 확인하세요.

결론

이 기사에서는 ASP.NET Core Razor Pages와 IronBarcode를 사용하여 서버 측 바코드 스캐너를 구축하는 방법을 설명했습니다. 같은 접근 방식은 이미지 데이터 수신 방법을 조정하여 ASP.NET Core MVC 컨트롤러, 웹 API 엔드포인트 및 Blazor 서버 애플리케이션에서도 작동합니다. IronBarcode는 이미지 처리를 내부에서 처리하므로 웹 프레임워크에 관계없이 통합에는 최소한의 코드가 필요합니다.

다른 .NET 플랫폼에서 바코드를 읽으려면 .NET MAUI 바코드 스캐너 튜토리얼바코드 읽기 가이드를 참조하세요. IronBarcode에 대한 더 많은 튜토리얼은 바코드 읽기 튜토리얼에서 확인하세요.

빠르게 시작하려면, 완전한 BarcodeWebApp 프로젝트를 다운로드하고 dotnet run로 실행하세요.

IronBarcode는 개발 및 상업적 사용을 위해 라이선스가 필요합니다. 라이선스 정보는 여기에서 확인할 수 있습니다.

자주 묻는 질문

Razor Pages를 사용하여 ASP.NET Core에서 바코드 스캐너를 구현하려면 어떻게 해야 하나요?

IronBarcode를 ASP.NET Core Razor Pages 프로젝트에서 사용하여 바코드 스캐너를 구현할 수 있습니다. 이 라이브러리를 사용하면 QR 코드, Code 128, Code 39와 같은 다양한 바코드 형식을 읽을 수 있으며 이미지를 업로드하여 BarcodeReader.Read로 처리할 수 있습니다.

IronBarcode를 사용하여 읽을 수 있는 바코드 유형은 무엇인가요?

IronBarcode는 QR 코드, Code 128, Code 39를 비롯한 다양한 바코드 형식을 읽을 수 있어 다양한 애플리케이션에 유연하게 활용할 수 있습니다.

ASP.NET Core 프로젝트에서 바코드 스캔을 위해 이미지를 업로드하려면 어떻게 하나요?

ASP.NET Core 프로젝트에서 IFormFile을 사용하여 이미지를 업로드할 수 있습니다. IronBarcode는 이러한 이미지를 처리하여 그 안에 포함된 바코드를 읽습니다.

IronBarcode는 ASP.NET Core에서 서버 측에서 바코드를 생성할 수 있나요?

예, IronBarcode는 ASP.NET Core에서 BarcodeWriter.CreateBarcode 메서드를 사용하여 서버 측에서 바코드를 생성할 수 있으며, 이를 통해 바코드를 동적으로 생성하고 표시할 수 있습니다.

BarcodeReader.Read 메서드는 무엇을 위해 사용됩니까?

IronBarcode의 BarcodeReader.Read 메서드는 이미지에서 바코드를 디코딩하는 데 사용되며, ASP.NET Core에서 바코드 스캐너를 구현하는 데 중요한 부분입니다.

ASP.NET Core에서 동일한 라이브러리를 사용하여 QR 코드와 바코드를 모두 스캔할 수 있나요?

예, IronBarcode를 사용하면 동일한 ASP.NET Core 애플리케이션 내에서 QR 코드 및 다양한 기타 바코드 형식을 스캔할 수 있으며, 통합 솔루션을 제공합니다.

C#에서 바코드 스캔을 위해 IronBarcode를 사용하는 이점은 무엇인가요?

IronBarcode는 손쉬운 통합, 여러바코드 형식에 대한 지원, 강력한 서버 측 바코드 생성 기능을 제공하므로 C# 애플리케이션에서 바코드 스캔을 위해 효율적인 선택입니다.

IronBarcode가 1D 및 2D 바코드를 모두 처리할 수 있나요?

IronBarcode는 1D 및 2D 바코드를 처리할 수 있으며, 이는 단순 제품 라벨링에서 복잡한 데이터 인코딩에 이르는 광범위한 애플리케이션에 적합합니다.

IronBarcode를 상업적 용도로 사용하는 데 라이선싱 옵션이 있나요?

Iron Software는 기업 수준 애플리케이션을 위한 상업 라이선스를 포함한 다양한 라이선싱 옵션을 제공하여 비즈니스 요구 사항을 충족할 수 있도록 합니다.

IronBarcode 바코드 일괄 처리를 지원합니까?

IronBarcode는 배치 처리를 지원하며, 개발자가 대규모 애플리케이션의 효율성을 높이기 위해 여러 바코드를 한 번에 생성하거나 읽을 수 있게 합니다.

Curtis Chau
기술 문서 작성자

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

커티스는 개발 분야 외에도 사물 인터넷(IoT)에 깊은 관심을 가지고 있으며, 하드웨어와 소프트웨어를 통합하는 혁신적인 방법을 연구합니다. 여가 시간에는 게임을 즐기거나 디스코드 봇을 만들면서 기술에 대한 애정과 창의성을 결합합니다.

시작할 준비 되셨나요?
Nuget 다운로드 2,317,217 | 버전: 2026.7 방금 출시
Still Scrolling Icon

아직도 스크롤하고 계신가요?

빠른 증거를 원하시나요? PM > Install-Package BarCode
샘플을 실행하세요 실이 바코드로 변하는 모습을 지켜보세요.