W tym artykułe omówiono integrację skanera kodów QR (skanera kodów Quick Response) w aplikacji Blazor przy użyciu biblioteki .NET o nazwie IronQR. QR code to dwuwymiarowy BARCODE, który przechowuje znacznie więcej danych niż zwykły jednowymiarowy BARCODE.

Blazor, framework firmy Microsoft, pozwala programistom tworzyć aplikacje jednostronicowe (przy użyciu aplikacji Blazor WebAssembly) lub używać języka C# do budowania interaktywnych interfejsów internetowych (Blazor Server, na którym skupimy się w tym przewodniku).

Integracja IronQR z Blazor Server w celu skanowania kodów QR to strategiczne połączenie, które wykorzystuje mocne strony obu technologii. Dzięki integracji IronQR z aplikacjami Blazor można efektywnie zarządzać generowaniem i skanowaniem kodów QR. Ta funkcja czytnika kodów QR jest coraz bardziej poszukiwana w różnych kontekstach biznesowych, takich jak zarządzanie zapasami, systemy biletowe i bezkontaktowa wymiana informacji.

Zrozumienie podstaw

Czym jest Blazor Server?

Blazor Server to framework aplikacji internetowych, który jest częścią platformy .NET Core. Umożliwia programistom tworzenie interaktywnych interfejsów użytkownika w sieci WWW przy użyciu języka C# zamiast JavaScript. Ten model po stronie serwera działa poprzez obsługę interakcji użytkownika za pośrednictwem połączenia SignalR, które zapewnia funkcjonalność internetową w czasie rzeczywistym. Pomaga to programistom w tworzeniu skutecznych i interaktywnych aplikacji internetowych.

Wprowadzenie do IronQR

Biblioteka IronQR to biblioteka .NET, która wyróżnia się zdolnością do odczytywania, interpretowania i generowania kodów QR z dużą dokładnością. Oferuje szereg funkcji, w tym możliwość obsługi różnych typów treści kodów QR. Siła IronQR leży w jego prostocie i łatwości integracji z aplikacjami .NET, co czyni go oczywistym wyborem dla programistów pragnących wbudować i tworzyć funkcjonalność kodów QR.

Jak stworzyć skaner kodów QR w Blazorze

1. Utwórz aplikację serwerową Blazor w Visual Studio Code
2. Zainstaluj bibliotekę klas QR Code za pomocą menedżera pakietów NuGet
3. Utwórz interfejs użytkownika przy użyciu HTML i CSS w pliku index.razor
4. Napisz logikę obsługi przesłanych plików
5. Napisz logikę skanowania kodów QR przy użyciu biblioteki QR
6. Wyświetl wynik w polu tekstowym

Konfiguracja środowiska

Utwórz nową aplikację serwerową Blazor

Uruchom Visual Studio i wybierz opcję "Utwórz nowy projekt". Na ekranie wyboru szablonu projektu znajdź i wybierz szablon "Blazor Server App". Kliknij Dalej.

Po wybraniu szablonu wprowadź nazwę projektu i lokalizację (pozostałe wartości pozostaw domyślne) i kliknij przycisk Dalej.

Teraz wybierz żądany .NET Framework i naciśnij przycisk tworzenia. Spowoduje to utworzenie aplikacji Blazor Server.

Instalacja biblioteki IronQR

Kliknij opcję Narzędzia na pasku menu. Z menu rozwijanego wybierz NuGet Package Manager. Z menu kontekstowego wybierz opcję "Zarządzaj pakietami NuGet dla rozwiązania". Spowoduje to otwarcie karty Menedżera pakietów NuGet.

W menedżerze pakietów NuGet wyszukaj "IronQR" w zakładce "Przeglądaj". Następnie znajdź pakiet "IronQR" na liście. Kliknij przycisk "Zainstaluj".

Teraz, gdy wszystko jest już zainstalowane, możemy przejrzeć strukturę projektu i wdrożyć wszystkie elementy w Twoim projekcie.

Wdrażanie skanowania kodów QR

Tworzenie interfejsu użytkownika

Interfejs użytkownika skanera kodów QR jest zbudowany głównie w pliku Index.razor. Ten plik, będący częścią projektu Blazor Server, wykorzystuje połączenie HTML i składni Razor do tworzenia dynamicznej i interaktywnej strony internetowej. Struktura obejmuje:

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

Tytuł i nagłówek: Tagami <PageTitle> i <h1> definiuje się tytuł strony i główny nagłówek, co ustawia kontekst dla użytkownika.

Kontrola przesyłania obrazu: Do przesyłania obrazów kodu QR używany jest komponent <InputFile>. Ten element jest dostosowany do akceptowania wyłącznie plików graficznych, co poprawia komfort użytkowania poprzez odfiltrowanie nieistotnych typów plików.

Wyświetlanie obrazu: Po załadowaniu obrazu jest on wyświetlany za pomocą tagu <img>. Ta wizualna informacja zwrotna ma kluczowe znaczenie dla zapewnienia użytkownika, że został przesłany właściwy plik.

Przycisk skanowania: Przycisk oznaczony @onclick="ScanQRCode" uruchamia proces skanowania. Jego dostępność zależy od tego, czy plik jest zaznaczony, co zwiększa intuicyjność interfejsu.

Wyświetlanie wyników: Tekst zeskanowanego kodu QR jest wyświetlany w polu wprowadzania tekstu, co ułatwia jego przeglądanie. Oddzielny przycisk pozwala użytkownikom skopiować ten tekst do schowka.

Stylizacja CSS w pliku site.css

Estetyka wizualna i układ Skanera Kodu QR są zdefiniowane w pliku 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: Klasa ta stylizuje główny obszar treści, nadając mu określoną szerokość, wyśrodkowanie oraz subtelny cień dla głębi.

.file-input, .result-input: Te klasy stylizują elementy wejścia pliku i wyświetlania wyników, zapewniając ich wizualną spójność i pełne zajęcie szerokości kontenera.

.button: Przyciski są stylizowane z wyróżniającym się zielonym tłem, zaokrąglonymi rogami i efektem hover dla lepszej interakcji użytkownika.

.qr-image: Style zastosowane do obrazu kodu QR obejmują ograniczenia rozmiaru i automatyczne marginesy dla wyśrodkowania, aby obraz był widoczny, ale nie przytłaczający.

.result-section: Klasa ta zapewnia, że elementy w sekcji wyników są wyśrodkowane i odpowiednio rozstawione.

Obsługa przesyłania plików

Metoda HandleSelectedFile jest kluczowym elementem procesu skanowania kodów QR, obsługującym przesyłanie plików przez użytkownika i przygotowującym je do skanowania. Ta metoda jest wywoływana, gdy użytkownik wybiera plik poprzez komponent <InputFile>. Widać to w poniższym kodzie:

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

Oto szczegółowy opis jego funkcjonalności:

Wybór i walidacja plików: Gdy użytkownik przesyła plik, metoda przechwytuje jego szczegóły za pomocą InputFileChangeEventArgs e. Zmienna selectedFile jest następnie przypisywana do tego pliku, a wartość logiczna fileSelected jest ustawiana na true, co oznacza, że dane wejściowe/pliki są gotowe do przetwarzania.

Tworzenie ścieżki do pliku: Metoda przygotowuje katalog do przechowywania przesłanego obrazu. Używa Path.Combine do tworzenia ścieżki do katalogu 'UploadedImages', zapewniając jego istnienie za pomocą Directory.CreateDirectory. Ten krok ma kluczowe znaczenie dla systematycznego porządkowania przesłanych plików.

Generowanie unikalnej nazwy pliku: Aby uniknąć konfliktów z istniejącymi plikami, generowana jest unikalna nazwa pliku przy użyciu identyfikatora GUID (Globally Unique Identifier) z dołączonym rozszerzeniem oryginalnego pliku. Dzięki temu każdy przesłany plik jest jednoznacznie identyfikowany.

Zapisywanie pliku: Plik jest następnie zapisywany na serwerze. Metoda tworzy strumień plików wskazujący na nowo wygenerowaną ścieżkę pliku, a treść przesłanego pliku jest kopiowana do tego strumienia za pomocą await selectedFile.OpenReadStream().CopyToAsync(fileStream). Ten krok kończy proces przesyłania.

Przygotowanie obrazu do wyświetlenia: Po zapisaniu pliku konieczne jest ponowne wyświetlenie obrazu użytkownikowi w celu potwierdzenia. Metoda odczytuje plik do tablicy bajtów i konwertuje go do łańcucha Base64, odpowiedniego do bezpośredniego osadzenia w atrybucie src tagu <img>. Ta konwersja pozwala na wyświetlenie obrazu bez konieczności wysyłania osobnego żądania do serwera w celu pobrania pliku obrazu.

Skanowanie kodu QR

Metoda ScanQRCode jest sercem funkcjonalności skanowania kodów QR w aplikacji Blazor Server. Ta metoda pobiera przesłany obraz i wykorzystuje IronQR do wyodrębnienia danych kodu 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

Na początku metoda sprawdza, czy zmienna qrImageSrc, która zawiera ścieżkę do przesłanego obrazu, nie jest pusta. Ta kontrola zapewnia, że przed kontynuowaniem pracy dostępny jest prawidłowy obraz.

Po potwierdzeniu, że obraz jest gotowy do przetworzenia, metoda przechodzi do podstawowej funkcji odczytu kodu QR. Wymaga to kilku kluczowych kroków, zaczynając od załadowania obrazu z miejsca, w którym jest przechowywany, do formatu odpowiedniego do analizy kodu QR. Ta konwersja jest możliwa dzięki metodzie AnyBitmap.FromFile(qrImageSrc), która przygotowuje obraz do procesu skanowania.

Kolejny krok to utworzenie obiektu QrReader. Obiekt ten stanowi integralną część biblioteki IronQR, służąc jako podstawowe narzędzie do dekodowania kodów QR z obrazów. Przygotowany instancja QrReader powoduje, że aplikacja następnie przystępuje do skanowania przesłanego obrazu. Za tę akcję odpowiedzialna jest funkcja reader.Read(imageInput), która metodycznie przeszukuje obraz w poszukiwaniu kodów QR i wyodrębnia ich dane.

Wyniki skanowania są przechowywane w kolekcji IEnumerable<QrResult>. Następnie zbiór ten jest analizowany w celu znalezienia pierwszego wyniku kodu QR. Jeśli kod QR jest wykrywany i zawiera czytelny tekst, tekst ten jest przechwytywany i przechowywany w zmiennej scannedText. Jednak w sytuacjach, gdy kod QR nie został znaleziony lub nie zawiera tekstu, aplikacja wyświetla domyślny komunikat informujący użytkownika, że nie wykryto żadnej wartości QR.

Po pomyślnym zeskanowaniu kodu QR ciąg tekstowy jest wyświetlany w polu wprowadzania tekstu dzięki możliwościom dwukierunkowego powiązania danych w Blazorze. Jest to osiągnięte poprzez powiązanie zmiennej scannedText z elementem wejściowym tekstu. Pole wprowadzania danych jest wyłączone, co sprawia, że jest ono tylko do odczytu. Ten wybór projektowy koncentruje się na interakcji użytkownika polegającej na przeglądaniu wyniku i kopiowaniu go, a nie na edycji treści.

Cały proces skanowania jest zawarty w bloku try-catch, co zabezpiecza przed nieprzewidzianymi błędami podczas operacji skanowania. Może to obejmować kwestie związane z formatem plików graficznych lub nieoczekiwanymi błędami podczas procesu odczytu. Jeśli wystąpi wyjątek, zostanie on przechwycony, a komunikat o błędzie zostanie sformułowany i wyświetlony użytkownikowi. Takie podejście pomaga śledzić problemy, zachowując jednocześnie przejrzystość wobec użytkownika, co zwiększa niezawodność aplikacji.

Kopiowanie wyniku

Aby umożliwić funkcję kopiowania do schowka, funkcja JavaScript o nazwie copyTextToClipboard jest zdefiniowana w pliku _Host.cshtml. Ten skrypt jest prostym, ale skutecznym sposobem na interakcję ze schowkiem:

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

Ta funkcja przyjmuje parametr tekstowy, który jest tekstem do skopiowania. Używa metody navigator.clipboard.writeText, nowoczesnego podejścia do interakcji ze schowkiem. Ta metoda jest preferowana ze względu na swoją prostotę i zgodność ze standardami internetowymi. Został zaprojektowany tak, aby po pomyślnym skopiowaniu wyświetlał komunikat o sukcesie w konsoli, pomagając w debugowaniu i zapewniając płynne działanie. W przypadku wystąpienia błędu komunikat o błędzie jest rejestrowany w konsoli, zapewniając wgląd w wszelkie problemy napotkane podczas operacji.

Metoda CopyToClipboard w części @code pliku index.razor służy jako most między aplikacją Blazor a funkcją JavaScript. Przycisk wywołuje tę metodę click w interfejsie użytkownika. Po aktywacji, wywołuje funkcję JavaScript copyTextToClipboard, wykorzystując możliwości InterOp JavaScript Blazor. scannedText jest przekazywana jako argument do tej funkcji, efektywnie kopiując tekst do schowka użytkownika.

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

Uruchamianie aplikacji

Po uruchomieniu projektu użytkownik zobaczy następujący przejrzysty i prosty interfejs. Na ekranie startowym w widocznym miejscu znajduje się moduł skanera kodów QR. Moduł ten zawiera przycisk do przesłania pliku obrazu kodu QR ("Wybierz plik") oraz przycisk do rozpoczęcia procesu skanowania ("Skanuj kod QR"). Początkowo żaden plik nie jest wybrany, a obszar skanowania jest pusty, oczekując na wprowadzenie danych przez użytkownika.

Użytkownik wybiera i przesyła obraz kodu QR za pomocą przycisku "Wybierz plik", który teraz wyświetla nazwę wybranego pliku (np. "qrvalue.png"). Przesłany kod QR jest widoczny w wyznaczonym obszarze interfejsu, co potwierdza użytkownikowi, że obraz jest gotowy do zeskanowania.

Po kliknięciu przycisku "Skanuj kod QR" aplikacja przetwarza obraz. Jeśli skanowanie zakończy się powodzeniem, tekst zakodowany w kodzie QR zostanie wyświetlony tuż pod obrazkiem. W tym przypadku, przeskanowany wynik ('<https://ironsoftware.com/csharp/qr/>') to URL wskazujący, gdzie kod QR przekierowałby użytkownika, gdy zostanie zeskanowany czytnikiem QR. Obok wyniku pojawia się przycisk kopiowania, umożliwiający użytkownikowi łatwe skopiowanie zeskanowanego tekstu do schowka w celu dalszego wykorzystania.

Wnioski

Podsumowując, proces integracji IronQR z aplikacją Blazor Server przebiega płynnie i skutecznie, czego efektem jest rozwiązanie do skanowania kodów QR. Responsywne i łatwe w użyciu, od momentu rozpoczęcia konfiguracji projektu aż po wdrożenie funkcji skanowania, dzięki połączeniu potężnych możliwości przetwarzania IronQR z dynamicznym renderowaniem interfejsu użytkownika Blazor. Proces, od konfiguracji środowiska po wdrożenie, podkreśla praktyczność i skuteczność tej integracji w rzeczywistych zastosowaniach. Chociaż IronQR doskonale radzi sobie z kodami QR, w przypadku projektów wymagających funkcji skanowania kodów kreskowych idealnym rozwiązaniem jest IronBarcode, oferujący podobny poziom łatwości obsługi i integracji.

IronQR oferuje bezpłatną wersję próbną, dzięki której programiści mogą zapoznać się z funkcjami produktu przed zakupem. Aby przedłużyć użytkowanie i uzyskać dostęp do wszystkich profesjonalnych funkcji w produkcji, licencje IronQR zaczynają się od $999.