Jak utworzyć skaner kodów QR w Blazor

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.

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.

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>

Tytuł i nagłówek: Tagi <PageTitle> i <h1> definiują odpowiednio tytuł strony i główny nagłówek, ustalając kontekst dla użytkownika.

Kontrolka przesyłania obrazów: Do przesyłania obrazów kodów QR służy 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 obrazów: Po przesłaniu 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 tagiem @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 kodów 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: Ta klasa nadaje styl głównemu obszarowi treści, nadając mu określoną szerokość, wyśrodkowanie oraz subtelny cień dla uzyskania głębi.

.file-input, .result-input: Klasy te nadają styl elementom wprowadzania plików i wyświetlania wyników, zapewniając ich spójność wizualną i pełne wypełnienie szerokości kontenera.

.button: Przyciski mają charakterystyczne zielone tło, zaokrąglone rogi oraz efekt najechania kursorem, co poprawia interakcję z użytkownikiem.

.qr-image: Style zastosowane do obrazu kodu QR obejmują ograniczenia rozmiaru i automatyczne marginesy do wyśrodkowania, dzięki czemu obraz jest widoczny, ale nie przytłaczający.

.result-section: Ta klasa zapewnia, że elementy w sekcji wyników są wyśrodkowane i mają odpowiednie odstępy.

Obsługa przesyłania plików

Metoda HandleSelectedFile stanowi kluczowy element procesu skanowania kodów QR, obsługując przesyłanie plików przez użytkownika i przygotowując je do skanowania. Ta metoda jest uruchamiana, gdy użytkownik wybierze plik za pomocą komponentu <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

Oto szczegółowy opis jego funkcjonalności:

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

Tworzenie ścieżki do pliku: Metoda przygotowuje katalog do przechowywania przesłanego obrazu. Używa Path.Combine do utworzenia ścieżki do katalogu "UploadedImages", upewniając się, że istnieje on 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 ścieżkę nowo wygenerowanego pliku, a zawartość 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 ta wczytuje plik do tablicy bajtów i konwertuje go na ciąg znaków w formacie base64, nadający się 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 stanowi serce funkcji 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

Początkowo metoda sprawdza, czy zmienna qrImageSrc, zawierająca ś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. Konwersja ta jest możliwa dzięki metodzie AnyBitmap.FromFile(qrImageSrc), która przygotowuje obraz do procesu skanowania.

Kolejny krok polega na utworzeniu obiektu QrReader. Obiekt ten stanowi integralną część biblioteki IronQR, służąc jako podstawowe narzędzie do dekodowania kodów QR z obrazów. Gdy instancja QrReader jest gotowa, aplikacja przystępuje do skanowania przesłanego obrazu. Za tę czynność odpowiada 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 wykryty zostanie kod QR zawierający czytelny tekst, tekst ten zostanie przechwycony i zapisany 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. Osiąga się to poprzez powiązanie zmiennej scannedText z elementem tekstowym. 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 włączyć funkcję kopiowania do schowka, w pliku _Host.cshtml zdefiniowano funkcję JavaScript o nazwie copyTextToClipboard. Ten skrypt to prosty, ale skuteczny sposób 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. Wykorzystuje metodę navigator.clipboard.writeText, nowoczesne podejście 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 pomost między aplikacją Blazor a funkcją JavaScript. Przycisk wywołuje tę metodę click w interfejsie użytkownika. Po aktywacji wywołuje funkcję JavaScript copyTextToClipboard, korzystając z możliwości Blazor JavaScript InterOp. scannedText jest przekazywane jako argument do tej funkcji, co w efekcie powoduje skopiowanie tekstu 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

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 zeskanowany wynik ('<https://ironsoftware.com/csharp/qr/>') to adres URL wskazujący, dokąd kod QR przekieruje użytkownika po zeskanowaniu za pomocą czytnika kodów QR. Obok wyniku pojawia się przycisk kopiowania, umożliwiający użytkownikowi łatwe skopiowanie zeskanowanego tekstu do schowka w celu dalszego wykorzystania.