이 기사는 IronQR, .NET 라이브러리를 사용하여 Blazor 애플리케이션에 QR 코드 스캐너를 통합하는 것을 탐구합니다. QR 코드는 이차원 바코드로, 일반적인 일차원 바코드보다 훨씬 더 많은 데이터를 저장합니다.

Blazor는 Microsoft 프레임워크로, 개발자가 단일 페이지 앱을 만들거나 (Blazor WebAssembly 앱 사용) C#을 사용하여 상호작용 웹 인터페이스를 구축할 수 있도록 합니다 (이 가이드에서는 Blazor Server에 초점을 맞추고 있습니다).

Blazor Server에 IronQR을 통합하여 QR 코드 스캔을 수행하는 것은 두 기술의 강점을 활용한 전략적 조합입니다. IronQR을 Blazor 애플리케이션과 통합함으로써 QR 코드의 생성 및 스캔을 효율적으로 처리할 수 있습니다. QR 코드 리더의 이 기능은 재고 관리, 티켓 시스템, 비접촉 정보 공유와 같은 다양한 사업 맥락에서 점점 더 많이 요구되고 있습니다.

기본 이해

Blazor Server란 무엇인가요?

Blazor Server는 ASP.NET Core 플랫폼의 일부인 웹 애플리케이션 프레임워크입니다. 개발자가 JavaScript 대신 C#을 사용하여 인터랙티브한 웹 UI를 구축할 수 있도록 합니다. 이 서버 측 모델은 사용자 상호 작용을 SignalR 연결을 통해 처리하여 실시간 웹 기능을 제공합니다. 이는 개발자가 효과적이고 상호적으로 작동하는 웹 앱을 만들 수 있게 도와줍니다.

IronQR 소개

IronQR은 .NET 라이브러리로, 높은 정확도로 QR 코드를 읽고, 해석하고, 생성할 수 있도록 한다는 점에서 두드러집니다. 다양한 유형의 QR 코드 콘텐츠를 처리할 수 있는 기능을 포함한 다양한 기능을 제공합니다. IronQR의 강점은 간단함과 .NET 애플리케이션에 대한 용이한 통합에 있으며, QR 코드 기능을 통합하고 생성하려는 개발자에게 기본 선택이 됩니다.

Blazor QR 코드 스캐너 만드는 방법

1. Visual Studio Code에서 Blazor 서버 애플리케이션 생성
2. NuGet 패키지 관리자를 사용하여 QR 코드 클래스 라이브러리 설치
3. index.razor의 HTML 및 CSS를 사용하여 사용자 인터페이스 생성
4. 업로드한 파일 처리 로직 작성
5. QR 라이브러리를 사용하여 QR 스캔 로직 작성
6. 텍스트 상자에 결과 표시

환경 설정

새 Blazor 서버 애플리케이션 만들기

Visual Studio를 시작하고 '새 프로젝트 만들기'를 선택합니다. 프로젝트 템플릿 선택 화면에서 'Blazor Server App' 템플릿을 찾아 선택합니다. 다음을 클릭합니다.

템플릿을 선택한 후 프로젝트 이름 및 위치를 입력하고 (기타 모든 것은 기본값으로 유지) 다음 버튼을 클릭합니다.

원하는 .NET Framework를 선택하고 생성 버튼을 누릅니다. Blazor 서버 응용 프로그램이 생성됩니다.

IronQR 라이브러리 설치

메뉴 바에서 도구를 클릭합니다. 드롭다운 메뉴에서 NuGet 패키지 관리자를 선택합니다. 컨텍스트 메뉴에서 '솔루션용 NuGet 패키지 관리'를 선택합니다. 이는 NuGet 패키지 관리자 탭을 엽니다.

NuGet 패키지 관리자에서 'IronQR'을 '탐색' 탭에서 검색합니다. 그런 다음 목록에서 'IronQR' 패키지를 찾습니다. '설치' 버튼을 클릭합니다.

이제 모든 것을 설치했으니 프로젝트 구조를 살펴보고 모든 것을 당신의 프로젝트에 구현할 수 있습니다.

QR 코드 스캐닝 구현

사용자 인터페이스 구축

QR 코드 스캐너의 사용자 인터페이스는 주로 Index.razor 파일에서 구축됩니다. 이 파일은 Blazor 서버 프로젝트의 일부로, HTML과 Razor 문법의 조합을 사용하여 동적이고 상호작용하는 웹 페이지를 만듭니다. 구조는 다음을 포함합니다:

@page "/"
@using System.IO
@using Microsoft.AspNetCore.Components.Forms
@using IronQr
@using IronSoftware.Drawing
@inject IJSRuntime JSRuntime
<PageTitle>QR Code Scanner</PageTitle>
<div>
    <h1>QR Code Scanner</h1> 
    <InputFile OnChange="HandleSelectedFile" accept="image/*" class="file-input" />
    @if (!string.IsNullOrEmpty(qrImageSrcForDisplay))
    {
        <img src="@qrImageSrcForDisplay" alt="QR Code Image" class="qr-image" />
    }
    <button @onclick="ScanQRCode" disabled="@(!fileSelected)" class="button scan-button">Scan QR Code</button>
    @if (!string.IsNullOrEmpty(scannedText))
    {
        <div class="result-section">
            <input type="text" value="@scannedText" readonly class="result-input" />
            <button @onclick="CopyToClipboard" class="button copy-button">Copy</button>
        </div>
    }
</div>

@page "/"
@using System.IO
@using Microsoft.AspNetCore.Components.Forms
@using IronQr
@using IronSoftware.Drawing
@inject IJSRuntime JSRuntime
<PageTitle>QR Code Scanner</PageTitle>
<div>
    <h1>QR Code Scanner</h1> 
    <InputFile OnChange="HandleSelectedFile" accept="image/*" class="file-input" />
    @if (!string.IsNullOrEmpty(qrImageSrcForDisplay))
    {
        <img src="@qrImageSrcForDisplay" alt="QR Code Image" class="qr-image" />
    }
    <button @onclick="ScanQRCode" disabled="@(!fileSelected)" class="button scan-button">Scan QR Code</button>
    @if (!string.IsNullOrEmpty(scannedText))
    {
        <div class="result-section">
            <input type="text" value="@scannedText" readonly class="result-input" />
            <button @onclick="CopyToClipboard" class="button copy-button">Copy</button>
        </div>
    }
</div>

제목 및 헤딩: <PageTitle> 태그와 <h1> 태그는 각각 페이지의 제목과 주요 헤딩을 정의하여 사용자의 컨텍스트를 설정합니다.

이미지 업로드 컨트롤: QR 코드 이미지를 업로드하기 위해 <InputFile> 구성 요소가 사용됩니다. 이 요소는 주로 이미지 파일만 허용하도록 설계되어, 관련 없는 파일 유형을 필터링하여 사용자 경험을 향상시킵니다.

이미지 표시: 이미지가 업로드되면 <img> 태그를 사용하여 표시됩니다. 이 시각적 피드백은 올바른 파일이 업로드되었음을 사용자가 확인하는 데 매우 중요합니다.

스캔 버튼: @onclick="ScanQRCode" 태그가 있는 버튼이 스캔 프로세스를 트리거합니다. 파일이 선택되었는지 여부에 따라 사용 가능하며, 인터페이스의 직관성을 높여줍니다.

결과 표시: 스캔된 QR 코드의 텍스트가 텍스트 입력 필드에 표시되어 쉽게 볼 수 있습니다. 사용자가 이 텍스트를 클립보드에 복사할 수 있는 별도 버튼이 제공됩니다.

site.css에서의 CSS 스타일링

QR 코드 스캐너의 시각적 미학 및 레이아웃은 site.css 파일에 정의되어 있습니다.

.content {
    padding: 20px;
    margin: 10px auto; /* Centers the content */
    max-width: 500px; /* Sets a max width for the content */
    border-radius: 10px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    text-align: center;
}

.file-input, .result-input {
    margin: 10px 0;
    padding: 10px;
    border-radius: 5px;
    border: 1px solid #ddd;
    width: 100%;
}

.button {
    background-color: #4CAF50;
    color: white;
    border: none;
    cursor: pointer;
    padding: 10px;
    margin: 10px 0;
    border-radius: 5px;
    transition: background-color 0.3s, box-shadow 0.3s;
    width: auto; /* Adjusts button width */
    display: inline-block; /* Allows the width to adjust to content */
}

.button:hover {
    background-color: #45a049;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
} 

.qr-image {
    max-width: 300px;
    max-height: 300px;
    display: block;
    margin: 10px auto;
    border-radius: 10px;
}

.result-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.result-input {
    width: 100%;
    box-sizing: border-box;
}

.copy-button {
    margin-top: 10px;
    white-space: nowrap;
}

.content {
    padding: 20px;
    margin: 10px auto; /* Centers the content */
    max-width: 500px; /* Sets a max width for the content */
    border-radius: 10px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    text-align: center;
}

.file-input, .result-input {
    margin: 10px 0;
    padding: 10px;
    border-radius: 5px;
    border: 1px solid #ddd;
    width: 100%;
}

.button {
    background-color: #4CAF50;
    color: white;
    border: none;
    cursor: pointer;
    padding: 10px;
    margin: 10px 0;
    border-radius: 5px;
    transition: background-color 0.3s, box-shadow 0.3s;
    width: auto; /* Adjusts button width */
    display: inline-block; /* Allows the width to adjust to content */
}

.button:hover {
    background-color: #45a049;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
} 

.qr-image {
    max-width: 300px;
    max-height: 300px;
    display: block;
    margin: 10px auto;
    border-radius: 10px;
}

.result-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.result-input {
    width: 100%;
    box-sizing: border-box;
}

.copy-button {
    margin-top: 10px;
    white-space: nowrap;
}

.content: 이 클래스는 주 컨텐츠 영역을 스타일링하며, 정의된 너비와 중앙 정렬, 깊이를 위한 미세한 그림자를 제공합니다.

.file-input, .result-input: 이 클래스는 파일 입력 및 결과 표시 요소를 스타일링하여 시각적으로 일관되게 만들어 주고 컨테이너의 너비를 완전히 차지할 수 있도록 합니다.

.button: 버튼은 독특한 녹색 배경, 둥근 모서리, 사용자 상호 작용을 향상시키기 위한 호버 효과로 스타일링됩니다.

.qr-image: QR 코드 이미지에 적용된 스타일은 크기 제한과 여백 자동화를 포함하여 이미지를 두드러지게 하지만 과도하지 않게 합니다.

.result-section: 이 클래스는 결과 섹션 내 요소들을 중앙에 정렬하고 적절히 간격을 배치합니다.

파일 업로드 처리

HandleSelectedFile 메소드는 QR 코드 스캔 프로세스의 중요한 부분으로 파일 업로드를 처리하고 스캔을 위한 준비를 합니다. 이 메소드는 사용자가 <InputFile> 구성 요소를 통해 파일을 선택할 때 트리거됩니다. 다음 코드에서 보여줍니다:

private async Task HandleSelectedFile(InputFileChangeEventArgs e)
{
    selectedFile = e.File;
    fileSelected = true;
    var imagesDirectory = Path.Combine(Directory.GetCurrentDirectory(), "UploadedImages");
    Directory.CreateDirectory(imagesDirectory); // Ensure the directory exists

    // Use a GUID as the unique file name
    var uniqueFileName = Guid.NewGuid().ToString() + Path.GetExtension(selectedFile.Name);
    var fullPath = Path.Combine(imagesDirectory, uniqueFileName);

    await using (var fileStream = new FileStream(fullPath, FileMode.Create))
    {
        await selectedFile.OpenReadStream().CopyToAsync(fileStream);
    }

    // Store the full path in qrImageSrc for scanning
    qrImageSrc = fullPath;

    // Optionally, create a base64 string for displaying the image (if needed)
    byte[] imageBytes = await File.ReadAllBytesAsync(fullPath);
    var base64String = Convert.ToBase64String(imageBytes);
    qrImageSrcForDisplay = $"data:image/{Path.GetExtension(selectedFile.Name).TrimStart('.')};base64,{base64String}";
}

private async Task HandleSelectedFile(InputFileChangeEventArgs e)
{
    selectedFile = e.File;
    fileSelected = true;
    var imagesDirectory = Path.Combine(Directory.GetCurrentDirectory(), "UploadedImages");
    Directory.CreateDirectory(imagesDirectory); // Ensure the directory exists

    // Use a GUID as the unique file name
    var uniqueFileName = Guid.NewGuid().ToString() + Path.GetExtension(selectedFile.Name);
    var fullPath = Path.Combine(imagesDirectory, uniqueFileName);

    await using (var fileStream = new FileStream(fullPath, FileMode.Create))
    {
        await selectedFile.OpenReadStream().CopyToAsync(fileStream);
    }

    // Store the full path in qrImageSrc for scanning
    qrImageSrc = fullPath;

    // Optionally, create a base64 string for displaying the image (if needed)
    byte[] imageBytes = await File.ReadAllBytesAsync(fullPath);
    var base64String = Convert.ToBase64String(imageBytes);
    qrImageSrcForDisplay = $"data:image/{Path.GetExtension(selectedFile.Name).TrimStart('.')};base64,{base64String}";
}

Private Async Function HandleSelectedFile(ByVal e As InputFileChangeEventArgs) As Task
	selectedFile = e.File
	fileSelected = True
	Dim imagesDirectory = Path.Combine(Directory.GetCurrentDirectory(), "UploadedImages")
	Directory.CreateDirectory(imagesDirectory) ' Ensure the directory exists

	' Use a GUID as the unique file name
	Dim uniqueFileName = Guid.NewGuid().ToString() & Path.GetExtension(selectedFile.Name)
	Dim fullPath = Path.Combine(imagesDirectory, uniqueFileName)

'INSTANT VB TODO TASK: Local functions are not converted by Instant VB:
'	await using(var fileStream = New FileStream(fullPath, FileMode.Create))
'	{
'		await selectedFile.OpenReadStream().CopyToAsync(fileStream);
'	}

	' Store the full path in qrImageSrc for scanning
	qrImageSrc = fullPath

	' Optionally, create a base64 string for displaying the image (if needed)
	Dim imageBytes() As Byte = Await File.ReadAllBytesAsync(fullPath)
	Dim base64String = Convert.ToBase64String(imageBytes)
	qrImageSrcForDisplay = $"data:image/{Path.GetExtension(selectedFile.Name).TrimStart("."c)};base64,{base64String}"
End Function

Private Async Function HandleSelectedFile(ByVal e As InputFileChangeEventArgs) As Task
	selectedFile = e.File
	fileSelected = True
	Dim imagesDirectory = Path.Combine(Directory.GetCurrentDirectory(), "UploadedImages")
	Directory.CreateDirectory(imagesDirectory) ' Ensure the directory exists

	' Use a GUID as the unique file name
	Dim uniqueFileName = Guid.NewGuid().ToString() & Path.GetExtension(selectedFile.Name)
	Dim fullPath = Path.Combine(imagesDirectory, uniqueFileName)

'INSTANT VB TODO TASK: Local functions are not converted by Instant VB:
'	await using(var fileStream = New FileStream(fullPath, FileMode.Create))
'	{
'		await selectedFile.OpenReadStream().CopyToAsync(fileStream);
'	}

	' Store the full path in qrImageSrc for scanning
	qrImageSrc = fullPath

	' Optionally, create a base64 string for displaying the image (if needed)
	Dim imageBytes() As Byte = Await File.ReadAllBytesAsync(fullPath)
	Dim base64String = Convert.ToBase64String(imageBytes)
	qrImageSrcForDisplay = $"data:image/{Path.GetExtension(selectedFile.Name).TrimStart("."c)};base64,{base64String}"
End Function

여기에 그 기능에 대한 자세한 분석이 있습니다:

파일 선택 및 유효성 검사: 사용자가 파일을 업로드하면 메소드는 InputFileChangeEventArgs e을 사용하여 파일의 세부 정보를 캡처합니다. selectedFile 변수는 이 파일에 할당되며, fileSelected 불리언은 입력 데이터/파일이 처리 준비가 되었음을 나타내기 위해 true로 설정됩니다.

파일 경로 생성: 메소드는 업로드된 이미지를 저장할 디렉토리를 준비합니다. Path.Combine을 사용하여 'UploadedImages' 디렉터리로의 경로를 생성하며, Directory.CreateDirectory을 사용하여 해당 경로가 존재하도록 보장합니다. 이 단계는 업로드된 파일을 체계적으로 정리하는 데 중요합니다.

고유 파일명 생성: 기존 파일과의 충돌을 피하기 위해, 원본 파일의 확장자가 추가된 GUID(전역 고유 식별자)를 사용하여 고유 파일명이 생성됩니다. 이는 각 업로드 파일이 고유하게 식별되도록 보장합니다.

파일 저장: 파일은 서버에 저장됩니다. 메소드는 새로 생성된 파일 경로를 가리키는 파일 스트림을 만들고, await selectedFile.OpenReadStream().CopyToAsync(fileStream)을 사용하여 업로드된 파일 내용을 이 스트림에 복사합니다. 이 단계는 업로드 과정을 완료합니다.

디스플레이를 위한 이미지 준비: 파일이 저장된 후 사용자가 확인할 수 있도록 이미지를 다시 제공해야 합니다. 메소드는 파일을 바이트 배열로 읽고 이를 <img> 태그의 src 속성에 직접 포함하기에 적합한 base64 문자열로 변환합니다. 이 변환을 통해 이미지 파일을 서버에서 별도로 요청하지 않고 이미지를 표시할 수 있습니다.

QR 코드 스캔

ScanQRCode 메소드는 Blazor 서버 응용 프로그램에서 QR 코드 스캔 기능의 핵심입니다. 이 메소드는 업로드된 이미지를 가져와 IronQR을 사용하여 QR 코드 데이터를 추출합니다.

private async Task ScanQRCode()
{
    // Check if there is a valid image to work with
    if (string.IsNullOrEmpty(qrImageSrc)) return;

    try
    {
        var inputBmp = AnyBitmap.FromFile(qrImageSrc);
        QrImageInput imageInput = new QrImageInput(inputBmp);
        QrReader reader = new QrReader();
        IEnumerable<QrResult> results = reader.Read(imageInput);

        // Check if there are any results and if the first result contains text
        var firstResult = results.FirstOrDefault();
        if (firstResult != null && !string.IsNullOrWhiteSpace(firstResult.Value.ToString()))
        {
            scannedText = firstResult.Value.ToString();
        }
        else
        {
            scannedText = "QR value not found!";
        }
    }
    catch (Exception ex)
    {
        scannedText = "Error scanning QR code: " + ex.Message;
    }
}

private async Task ScanQRCode()
{
    // Check if there is a valid image to work with
    if (string.IsNullOrEmpty(qrImageSrc)) return;

    try
    {
        var inputBmp = AnyBitmap.FromFile(qrImageSrc);
        QrImageInput imageInput = new QrImageInput(inputBmp);
        QrReader reader = new QrReader();
        IEnumerable<QrResult> results = reader.Read(imageInput);

        // Check if there are any results and if the first result contains text
        var firstResult = results.FirstOrDefault();
        if (firstResult != null && !string.IsNullOrWhiteSpace(firstResult.Value.ToString()))
        {
            scannedText = firstResult.Value.ToString();
        }
        else
        {
            scannedText = "QR value not found!";
        }
    }
    catch (Exception ex)
    {
        scannedText = "Error scanning QR code: " + ex.Message;
    }
}

Private Async Function ScanQRCode() As Task
	' Check if there is a valid image to work with
	If String.IsNullOrEmpty(qrImageSrc) Then
		Return
	End If

	Try
		Dim inputBmp = AnyBitmap.FromFile(qrImageSrc)
		Dim imageInput As New QrImageInput(inputBmp)
		Dim reader As New QrReader()
		Dim results As IEnumerable(Of QrResult) = reader.Read(imageInput)

		' Check if there are any results and if the first result contains text
		Dim firstResult = results.FirstOrDefault()
		If firstResult IsNot Nothing AndAlso Not String.IsNullOrWhiteSpace(firstResult.Value.ToString()) Then
			scannedText = firstResult.Value.ToString()
		Else
			scannedText = "QR value not found!"
		End If
	Catch ex As Exception
		scannedText = "Error scanning QR code: " & ex.Message
	End Try
End Function

Private Async Function ScanQRCode() As Task
	' Check if there is a valid image to work with
	If String.IsNullOrEmpty(qrImageSrc) Then
		Return
	End If

	Try
		Dim inputBmp = AnyBitmap.FromFile(qrImageSrc)
		Dim imageInput As New QrImageInput(inputBmp)
		Dim reader As New QrReader()
		Dim results As IEnumerable(Of QrResult) = reader.Read(imageInput)

		' Check if there are any results and if the first result contains text
		Dim firstResult = results.FirstOrDefault()
		If firstResult IsNot Nothing AndAlso Not String.IsNullOrWhiteSpace(firstResult.Value.ToString()) Then
			scannedText = firstResult.Value.ToString()
		Else
			scannedText = "QR value not found!"
		End If
	Catch ex As Exception
		scannedText = "Error scanning QR code: " & ex.Message
	End Try
End Function

초기에 메소드는 업로드된 이미지 경로를 보유하는 qrImageSrc 변수가 비어 있지 않은지 확인합니다. 이 검사로 처리할 유효한 이미지가 있는지 확인합니다.

이미지가 처리 준비가 되었음을 확인하면, 메소드는 QR 코드 읽기의 핵심 기능으로 진행합니다. 이 과정은 저장된 위치에서 이미지를 로드하여 QR 코드 분석에 적합한 형식으로 변환하는 것부터 시작됩니다. 이 변환은 이미지를 스캔 프로세스에 준비시키는 AnyBitmap.FromFile(qrImageSrc) 메소드 의해 가능하게 됩니다.

다음 단계는 QrReader 객체를 생성하는 것입니다. 이 객체는 이미지에서 QR 코드를 디코딩하기 위한 주요 도구로서 IronQR 라이브러리에 중요한 역할을 합니다. QrReader 인스턴스가 준비되면, 응용 프로그램은 업로드된 이미지를 스캔하는 작업을 진행합니다. reader.Read(imageInput) 함수는 이 작업을 담당하며, 이미지에서 QR 코드를 체계적으로 검색하고 해당 데이터를 추출합니다.

스캔 결과는 IEnumerable<QrResult> 컬렉션에 저장됩니다. 이 컬렉션은 처음 QR 코드 결과를 찾기 위해 분석됩니다. QR 코드가 감지되면, 읽을 수 있는 텍스트가 포함되어 있는 경우, 이 텍스트는 scannedText 변수에 캡처되어 저장됩니다. 그러나 QR 코드가 발견되지 않거나 텍스트가 포함되어 있지 않은 경우, 애플리케이션은 사용자에게 QR 값이 감지되지 않았음을 알리는 기본 메시지를 설정합니다.

QR 코드가 성공적으로 스캔된 후, 텍스트 문자열은 Blazor의 양방향 데이터 바인딩 기능 덕분에 텍스트 입력 필드에 표시됩니다. 이는 scannedText 변수를 텍스트 입력 요소에 바인딩함으로써 달성됩니다. 입력 필드는 읽기 전용으로 설정되어 비활성화됩니다. 이 디자인 선택은 사용자 상호작용을 결과 보기 및 복사에 집중시키고 콘텐츠 편집이 아닌 방향으로 유도합니다.

전체 스캔 과정은 예기치 않은 오류로부터 보호하는 try-catch 블록 안에 포함되어 있습니다. 이는 이미지 파일 포맷과 관련된 문제나 읽기 과정에서 발생할 수 있는 예기치 않은 오류 등을 포함할 수 있습니다. 예외가 발생하면, 포착되어 사용자에게 표시할 오류 메시지가 작성됩니다. 이 접근법은 사용자와의 투명성을 유지하면서 문제를 추적하고 애플리케이션의 신뢰성을 향상시킵니다.

결과 복사하기

클립보드로 복사 기능을 사용하기 위해, copyTextToClipboard라는 JavaScript 함수가 _Host.cshtml 파일에 정의됩니다. 이 스크립트는 클립보드와 상호 작용하기 위한 간단하지만 효과적인 방법입니다.

<script>
    function copyTextToClipboard(text) {
        navigator.clipboard.writeText(text).then(function () {
            console.log('Copying to clipboard was successful!');
        }, function (err) {
            console.error('Could not copy text: ', err);
        });
    }
</script>

<script>
    function copyTextToClipboard(text) {
        navigator.clipboard.writeText(text).then(function () {
            console.log('Copying to clipboard was successful!');
        }, function (err) {
            console.error('Could not copy text: ', err);
        });
    }
</script>

이 함수는 복사할 텍스트인 텍스트 매개변수를 수락합니다. 이는 클립보드와 상호 작용하기 위한 최신 방법인 navigator.clipboard.writeText 메소드를 사용합니다. 이 메소드는 그 간단함과 웹 표준 준수로 인해 선호됩니다. 성공적으로 복사되면 콘솔에 성공 메시지를 기록하여 디버깅을 돕고 원활한 기능을 보장하도록 설계되었습니다. 오류가 발생한 경우, 오류 메시지가 콘솔에 기록되어 작업 중 발생한 문제에 대한 통찰력을 제공합니다.

index.razor의 @code 부분에 있는 CopyToClipboard 메소드는 Blazor 앱과 JavaScript 기능 간의 교량 역할을 합니다. 버튼을 클릭하면 사용자 인터페이스에서 이 메서드가 실행됩니다. 활성화되면, 이는 Blazor의 JavaScript InterOp 기능을 사용하여 copyTextToClipboard JavaScript 함수를 호출합니다. scannedText은 이 함수에 인수로 전달되어 효과적으로 사용자의 클립보드로 텍스트를 복사합니다.

private async Task CopyToClipboard()
{
    await JSRuntime.InvokeVoidAsync("copyTextToClipboard", scannedText);
}

private async Task CopyToClipboard()
{
    await JSRuntime.InvokeVoidAsync("copyTextToClipboard", scannedText);
}

Private Async Function CopyToClipboard() As Task
	Await JSRuntime.InvokeVoidAsync("copyTextToClipboard", scannedText)
End Function

Private Async Function CopyToClipboard() As Task
	Await JSRuntime.InvokeVoidAsync("copyTextToClipboard", scannedText)
End Function

응용 프로그램 실행

프로젝트를 실행하면 사용자는 다음과 같은 깔끔하고 간단한 인터페이스를 볼 수 있습니다. 초기 화면은 QR 코드 스캐너 모듈이 두드러져 보입니다. 이 모듈에는 QR 코드 이미지 파일을 업로드하는 버튼('파일 선택')과 스캔 프로세스를 시작하는 다른 버튼('QR 코드 스캔')이 포함되어 있습니다. 초기에는 파일이 선택되지 않았으며 스캔 영역이 비어 있어 사용자 입력을 기다리고 있습니다.

사용자는 '파일 선택' 버튼을 사용하여 QR 코드 이미지를 선택하고 업로드하며, 이제 선택된 파일의 이름(예: 'qrvalue.png')을 표시합니다. 업로드된 QR 코드는 인터페이스의 지정된 영역에 보여져 이미지가 스캔 준비가 되었음을 사용자에게 확인시킵니다.

사용자가 'QR 코드 스캔' 버튼을 클릭한 후, 응용 프로그램은 이미지를 처리합니다. 스캔이 성공하면 QR 코드 내부에 인코딩된 텍스트가 이미지 바로 아래에 표시됩니다. 이 경우, 스캔된 결과('<https://ironsoftware.com/csharp/qr/>')는 QR 리더기로 스캔했을 때 사용자를 어디로 안내할지를 나타내는 URL입니다. 결과 옆에는 사용자가 스캔된 텍스트를 클립보드에 쉽게 복사할 수 있도록 복사 버튼이 나타납니다.

결론

요약하면, IronQR을 Blazor Server 응용 프로그램에 통합하는 과정은 원활하고 효과적이며, QR 코드 스캐닝 솔루션을 제공합니다. IronQR의 강력한 처리와 Blazor의 동적 UI 렌더링의 혼합 덕분에 이 프로젝트의 시작부터 스캔 기능의 구현에 이르기까지 반응이 빠르고 사용이 용이합니다. 환경 설정부터 배포까지의 과정은 실제 응용 프로그램에서 이 통합의 실용성과 효과성을 강조합니다. IronQR이 QR 코드에 능숙한 동안, 바코드 스캔 기능이 필요한 프로젝트에는 IronBarcode가 이상적인 옵션으로, 유사한 수준의 용이성과 통합을 제공합니다.

IronQR는 개발자들이 구매 전에 기능을 탐색할 수 있는 무료 체험판을 제공합니다. 생산에서 확장된 사용 및 모든 전문 기능에 액세스하려면 IronQR 라이선스는 $999부터 시작합니다.