Blazor 에서 QR 코드를 생성하는 방법

다음 단계는 Blazor Server 애플리케이션에서 QR 코드를 생성하는 가장 좋은 방법을 도와줍니다:

Blazor HTML 구성 요소 추가

먼저, 우리는 'Index.razor' 페이지에 HTML 코드를 추가할 것입니다. 이 코드는 몇 가지 제목, 입력 필드 및 버튼으로 구성되어 있습니다.

다음 코드를 사용하여 Blazor 바코드 앱에 구성 요소를 추가하세요:

<h4>Welcome to Blazor QR Code Generator</h4>
<p>Enter the value to Generate QR Code:</p>

<input @bind="text" />

<button @onclick="QRCodeGenerater">Generate QR Code</button>

<p>Generated QR Code:</p>

<h4>Welcome to Blazor QR Code Generator</h4>
<p>Enter the value to Generate QR Code:</p>

<input @bind="text" />

<button @onclick="QRCodeGenerater">Generate QR Code</button>

<p>Generated QR Code:</p>

출력 결과는 다음과 같습니다.

텍스트 필드는 사용자의 입력을 받는 데 사용되며, 생성 버튼은 QR 코드를 생성하기 위해 QRCodeGenerater 메서드를 호출합니다. 생성된 QR 코드는 '생성된 QR 코드:' 제목 아래에 표시됩니다. 이제 QRCodeGenerater 메서드를 생성해 보겠습니다.

QRCodeGenerater 메서드 생성하기

강력한 IronBarcode 라이브러리를 Visual Studio에서 사용하여 QR 코드를 생성할 시간입니다. @code 섹션이 'Index.razor' 페이지에 추가됩니다. 먼저 아래의 전체 코드를 봅시다:

@code {
    // Variable to hold the generated QR code HTML
    private string qrCode = "";

    // Variable to hold user input text
    private string text = "";

    // Method to generate QR code from user input
    private void QRCodeGenerater()
    {
        // Create a QR code from the input text
        GeneratedBarcode myQRCode = QRCodeWriter.CreateQrCode(text);

        // Convert the generated QR code to HTML tag
        qrCode = Convert.ToString(myQRCode.ToHtmlTag());
    }
}

위의 코드에는 두 개의 개인 문자열 변수가 있습니다. qrCode는 생성된 QR 코드를 표시하고, text는 입력 필드에서 사용자 입력을 받습니다. 그런 다음 QRCodeGenerater 메서드에서 myQRCode는 QRCodeWriter 클래스의 CreateQrCode 메서드를 사용하여 생성됩니다. CreateQrCode 메서드는 코드 출력을 향상시키기 위한 여러 매개변수를 제공합니다. QR 코드의 크기를 사용자 정의하고, 오류 수정 수준을 유지하기 위해 오류 수정 코드 워드를 설정하며, QrVersion를 변경할 수 있습니다. 아래의 코드는 다른 매개변수들도 작업할 수 있도록 도와줍니다:

// Creating a QR code with custom parameters
QRCodeWriter.CreateQrCode(
    "https://ironsoftware.com/csharp/barcode/", // URL for the QR code
    500, // Size of the QR code
    QRCodeWriter.QrErrorCorrectionLevel.High, // Error correction level
    0 // QrVersion
)

// Creating a QR code with custom parameters
QRCodeWriter.CreateQrCode(
    "https://ironsoftware.com/csharp/barcode/", // URL for the QR code
    500, // Size of the QR code
    QRCodeWriter.QrErrorCorrectionLevel.High, // Error correction level
    0 // QrVersion
)

마지막으로, 생성된 Blazor 바코드는 HTML 태그로 변환된 후 qrCode 문자열로 변환됩니다.

이 코드 예제 페이지에서 IronBarcode 기능에 대한 자세한 정보를 얻으십시오.

Blazor Server 애플리케이션 홈 페이지에 표시

'Index.razor' 페이지의 HTML 구성 요소에 아래 코드를 H4 헤딩 다음에 추가하여 qrCode를 표시합니다:

@((MarkupString)qrCode)

PNG 파일로 저장

또한 SaveAsPng 메서드를 사용하여 PNG 파일로 저장할 수 있습니다:

// Save the generated QR code as a PNG file
myQRCode.SaveAsPng("myQRCode.png");

// Save the generated QR code as a PNG file
myQRCode.SaveAsPng("myQRCode.png");