ASP.NET Core 바코드 스캐너

필수 조건

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

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 페이지 핸들러에 제출되고, 조건부 블록이 업로드된 이미지 미리보기, 디코딩된 결과 또는 오류 메시지를 표시합니다.

샘플 입력 바코드

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

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

"IRONBARCODE-2026" 인코딩된 Code 128 바코드

"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();
    }
}

위 코드의 주요 단계:

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

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

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

이 접근 방식은 원시 base64와 데이터 URI 형식을 모두 처리합니다(예: data:image/png;base64,...)이며, 쉼표로 구분하여 실제 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");
}

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

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

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

애플리케이션 실행

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

dotnet run

dotnet run

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