Wie man einen Blazor-QR-Code-Scanner erstellt

Was ist ein Blazor Server?

Blazor Server ist ein Webanwendungs-Framework, das Teil der ASP.NET Core-Plattform ist. Es ermöglicht Entwicklern, interaktive Web-Benutzeroberflächen mit C# statt mit JavaScript zu erstellen. Dieses serverseitige Modell funktioniert, indem es Benutzerinteraktionen über eine SignalR-Verbindung verwaltet, die Echtzeit-Webfunktionalität bietet. Dies hilft Entwicklern, effektive und interaktive Web-Apps zu erstellen.

Einführung in IronQR

IronQR is a .NET library that stands out for its ability to read, interpret, and erzeugen. Es bietet eine Reihe von Funktionen, einschließlich der Möglichkeit, verschiedene Arten von QR-Code-Inhalten zu verarbeiten. Die Stärke von IronQR liegt in seiner Einfachheit und leichten Integrationsmöglichkeit in .NET-Anwendungen, was es zu einer bevorzugten Wahl für Entwickler macht, die nach einer Möglichkeit suchen, QR-Code-Funktionalität zu integrieren und zu erstellen.

Erstellen einer neuen Blazor Server-Anwendung

Starten Sie Visual Studio und wählen Sie "Create a new project." Im Bildschirm zur Auswahl der Projektschablone finden und wählen Sie die Schablone "Blazor Server App". Drücken Sie Weiter.

Nachdem Sie die Schablone ausgewählt haben, geben Sie einen Projektnamen und einen Speicherort ein (lassen Sie alles andere als Standardwerte) und klicken Sie auf die Schaltfläche Weiter.

Jetzt wählen Sie das gewünschte .NET-Framework aus und klicken auf den Erstellen-Button. Es wird eine Blazor Server-Anwendung erstellt.

Installation der IronQR-Bibliothek

Klicken Sie im Menü auf Tools. Wählen Sie im Dropdown-Menü den NuGet-Paketmanager aus. Wählen Sie im Kontextmenü „Manage NuGet Packages for Solution“. aus. Dadurch wird der NuGet-Paketmanager-Tab geöffnet.

Im NuGet-Paketmanager suchen Sie innerhalb der Registerkarte 'Durchsuchen' nach "IronQR". Dann finden Sie das Paket „IronQR“ in der Liste. Klicken Sie auf die Schaltfläche „Installieren“.

Jetzt, da Sie alles installiert haben, können wir die Projektstruktur durchgehen und alles in Ihr Projekt implementieren.

Erstellen der Benutzeroberfläche

Die Benutzeroberfläche für den QR-Code-Scanner wird hauptsächlich innerhalb der Index.razor-Datei erstellt. Diese Datei, Teil eines Blazor Server-Projekts, verwendet eine Kombination aus HTML und Razor-Syntax, um eine dynamische und interaktive Webseite zu erstellen. Die Struktur umfasst:

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

Titel und Überschrift: Die <PageTitle>- und <h1>-Tags definieren den Seitentitel und die Hauptüberschrift, was den Kontext für den Benutzer festlegt.

Bild-Upload-Kontrolle: Eine <InputFile>-Komponente wird verwendet, um QR-Code-Bilder hochzuladen. Dieses Element ist so konzipiert, dass es nur Bilddateien akzeptiert, um das Benutzererlebnis durch Herausfiltern nicht relevanter Dateitypen zu verbessern.

Bildanzeige: Sobald ein Bild hochgeladen ist, wird es mit einem <img>-Tag angezeigt. Dies ist ein visuelles Feedback, das die korrekte Datei upload bestätigt.

Scan-Button: Ein mit @onclick="ScanQRCode" versehenen Button löst den Scanprozess aus. Seine Verfügbarkeit hängt davon ab, ob eine Datei ausgewählt ist, was die Intuitivität der Benutzeroberfläche verbessert.

Ergebnisanzeige: Der gescannte QR-Code-Text wird in einem Texteingabefeld zur einfachen Ansicht angezeigt. Ein separater Button erlaubt den Benutzern, diesen Text in die Zwischenablage zu kopieren.

CSS-Styling in site.css

Das visuelle Erscheinungsbild und das Layout des QR-Code-Scanners werden in der site.css-Datei definiert.

.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: Diese Klasse gestaltet den Hauptinhaltbereich, indem sie ihm eine definierte Breite, zentrierte Ausrichtung und einen subtilen Schatten für Tiefe verleiht.

.file-input, .result-input: Diese Klassen stylen die Elemente Dateieingabe und Ergebnisanzeige, um sicherzustellen, dass sie visuell konsistent sind und die gesamte Breite ihres Containers einnehmen.

.button: Buttons werden mit einem markanten grünen Hintergrund, abgerundeten Ecken und einem Hover-Effekt für eine bessere Benutzerinteraktion gestaltet.

.qr-image: Die QR-Code-Bild-Styles umfassen Größenbeschränkungen und automatische Ausrichtung für die Zentrierung, wodurch das Bild markant wird, ohne überwältigend zu sein.

.result-section: Diese Klasse stellt sicher, dass die Elemente innerhalb des Ergebnisbereichs zentral ausgerichtet und angemessen verteilt sind.

Datei-Uploads handhaben

Die Methode HandleSelectedFile ist ein entscheidender Teil des QR-Code-Scanprozesses, der den Datei-Upload des Benutzers verarbeitet und für das Scannen vorbereitet. Diese Methode wird ausgelöst, wenn der Benutzer eine Datei über die <InputFile>-Komponente auswählt. Dies wird im folgenden Code gezeigt:

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

Hier ist eine detaillierte Aufschlüsselung ihrer Funktionalität:

Dateiauswahl und -validierung: Wenn ein Benutzer eine Datei hochlädt, erfasst die Methode die Dateidetails mit InputFileChangeEventArgs e. Die Variable selectedFile wird dann dieser Datei zugewiesen, und ein boolescher fileSelected wird auf true gesetzt, um zu signalisieren, dass die Eingabedaten/-datei bereit für die Verarbeitung sind.

Erzeugen des Dateipfades: Die Methode bereitet ein Verzeichnis vor, um das hochgeladene Bild zu speichern. Sie verwendet Path.Combine, um einen Pfad zum 'UploadedImages'-Verzeichnis zu erstellen und stellt mit Directory.CreateDirectory sicher, dass es existiert. Dieser Schritt ist entscheidend, um hochgeladene Dateien systematisch zu organisieren.

Generierung eines eindeutigen Dateinamens: Um Konflikte mit vorhandenen Dateien zu vermeiden, wird ein eindeutiger Dateiname generiert, indem ein GUID (Globally Unique Identifier) mit der ursprünglichen Dateierweiterung verbunden wird. Dies stellt sicher, dass jede hochgeladene Datei eindeutig identifiziert wird.

Speichern der Datei: Die Datei wird dann auf dem Server gespeichert. Die Methode erstellt einen Dateistream, der auf den neu generierten Dateipfad zeigt, und der Inhalt der hochgeladenen Datei wird in diesen Stream kopiert mit await selectedFile.OpenReadStream().CopyToAsync(fileStream). Dieser Schritt schließt den Upload-Prozess ab.

Vorbereitung des Bildes zur Anzeige: Nach dem Speichern der Datei ist es notwendig, das Bild zur Bestätigung an den Benutzer zurück anzuzeigen. Die Methode liest die Datei in ein Byte-Array und konvertiert sie in einen Base64-String, der für die direkte Einbettung in das img-Tag-src-Attribut geeignet ist. Diese Konvertierung ermöglicht es, das Bild anzuzeigen, ohne dass eine separate Anfrage an den Server für die Bilddatei erforderlich ist.

Das Scannen des QR-Codes

Die Methode ScanQRCode ist das Herzstück der QR-Code-Scan-Funktionalität in der Blazor Server-Anwendung. Diese Methode nimmt das hochgeladene Bild und verwendet IronQR, um die QR-Codedaten zu extrahieren.

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

Anfangs überprüft die Methode, ob die Variable qrImageSrc, die den Pfad zum hochgeladenen Bild speichert, nicht leer ist. Diese Überprüfung stellt sicher, dass ein gültiges Bild vorhanden ist, mit dem gearbeitet werden kann, bevor fortgefahren wird.

Sobald bestätigt ist, dass ein Bild zur Verarbeitung bereit ist, fährt die Methode mit der Kernfunktionalität des QR-Code-Lesens fort. Dies umfasst einige Schlüsselprozesse, beginnend mit dem Laden des Bildes von seinem gespeicherten Standort in ein für die QR-Code-Analyse geeignetes Format. Diese Konvertierung wird durch die Methode AnyBitmap.FromFile(qrImageSrc) ermöglicht, die das Bild für den Scanprozess vorbereitet.

Der nächste Schritt besteht darin, ein QrReader-Objekt zu erstellen. Dieses Objekt ist ein wesentlicher Bestandteil der IronQR-Bibliothek und dient als primäres Werkzeug zum Dekodieren von QR-Codes aus Bildern. Mit der vorbereiteten QrReader-Instanz geht die Anwendung dann zum Scannen des hochgeladenen Bildes über. Die Funktion reader.Read(imageInput) ist für diese Aktion verantwortlich und sucht methodisch im Bild nach QR-Codes, um deren Daten zu extrahieren.

Die Ergebnisse des Scans werden in einer IEnumerable<QrResult>-Sammlung gespeichert. Diese Sammlung wird dann überprüft, um das erste QR-Code-Ergebnis zu finden. Wenn ein QR-Code erkannt wird und lesbarer Text enthält, wird dieser Text erfasst und in der Variable scannedText gespeichert. In Szenarien, in denen entweder kein QR-Code gefunden wird oder keinen Text enthält, legt die Anwendung eine Standardnachricht fest, um den Benutzer darüber zu informieren, dass kein QR-Wert erkannt wurde.

Sobald der QR-Code erfolgreich gescannt wurde, wird der Textstring in einem Texteingabefeld angezeigt, dank der Zwei-Wege-Datenbindungsmöglichkeiten von Blazor. Dies wird erreicht, indem die Variable scannedText an ein Texteingabeelement gebunden wird. Das Eingabefeld ist so eingestellt, dass es deaktiviert ist, was es schreibgeschützt macht. Diese Designentscheidung konzentriert die Benutzerinteraktion darauf, das Ergebnis zu betrachten und es zu kopieren, statt den Inhalt zu bearbeiten.

Der gesamte Scanprozess ist in einen Try-Catch-Block eingeschlossen, um sich gegen unvorhergesehene Fehler während des Scanvorgangs abzusichern. Dies kann Probleme mit dem Bilddateiformat oder unerwartete Fehler während des Lesens umfassen. Wenn ein Ausnahmefall auftritt, wird er abgefangen, und eine Fehlermeldung wird formuliert und dem Benutzer angezeigt. Dieser Ansatz hilft, Probleme im Auge zu behalten und der Transparenz mit dem Benutzer zu wahren, was die Zuverlässigkeit der Anwendung erhöht.

Ergebnis kopieren

Um die Funktionalität „In die Zwischenablage kopieren“ zu aktivieren, wird eine JavaScript-Funktion mit dem Namen copyTextToClipboard in der Datei _Host.cshtml definiert. Dieses Skript ist eine einfache, aber effektive Möglichkeit, mit der Zwischenablage zu interagieren:

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

Diese Funktion akzeptiert einen Textparameter, bei dem es sich um den zu kopierenden Text handelt. Es verwendet die navigator.clipboard.writeText-Methode, einen modernen Ansatz zur Interaktion mit der Zwischenablage. Diese Methode wird wegen ihrer Einfachheit und der Einhaltung der Webstandards bevorzugt. Es ist so konzipiert, dass es bei erfolgreichem Kopieren eine Erfolgsmeldung in der Konsole protokolliert, was das Debugging unterstützt und eine reibungslose Funktion sicherstellt. Im Falle eines Fehlers wird eine Fehlermeldung in der Konsole protokolliert, um Einblicke in etwaige Probleme während des Vorgangs zu geben.

Die CopyToClipboard-Methode im @code-Teil der index.razor dient als Brücke zwischen der Blazor-App und der JavaScript-Funktion. Ein Button löst diese Methode im Klick in der Benutzeroberfläche aus. Bei Aktivierung ruft es die JavaScript-Funktion copyTextToClipboard mit den InterOp-Möglichkeiten von Blazor auf. Der scannedText wird als Argument an diese Funktion übergeben, was effektiv den Text in die Zwischenablage des Benutzers kopiert.

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

Ausführung der Anwendung

Beim Ausführen des Projekts sieht der Benutzer die folgende saubere und einfache Benutzeroberfläche. Der anfängliche Bildschirm zeigt das Modul des QR-Code-Scanners deutlich hervor. Dieses Modul enthält einen Button, um die QR-Code-Bilddatei hochzuladen ('Datei wählen') und einen anderen, um den Scanvorgang zu starten ('QR-Code scannen'). Zunächst ist keine Datei ausgewählt und der Scanbereich bleibt leer, bis der Benutzer eine Eingabe vornimmt.

Der Benutzer wählt ein QR-Code-Bild aus und lädt es über den Button 'Datei wählen' hoch, der nun den Namen der ausgewählten Datei anzeigt (z. B. 'qrvalue.png'). Der hochgeladene QR-Code wird im dafür vorgesehenen Bereich der Benutzeroberfläche angezeigt, was dem Benutzer bestätigt, dass das Bild zum Scannen bereit ist.

Nachdem der Benutzer auf den Button 'QR-Code scannen' geklickt hat, verarbeitet die Anwendung das Bild. Wenn der Scan erfolgreich ist, wird der im QR-Code kodierte Text direkt unter dem Bild angezeigt. In diesem Fall ist das gescannte Ergebnis ('<https://ironsoftware.com/csharp/qr/>') eine URL, die angibt, wohin ein QR-Code-Benutzer beim Scannen mit einem QR-Reader weitergeleitet würde. Ein Kopier-Button erscheint neben dem Ergebnis, der es dem Benutzer ermöglicht, den gescannten Text einfach in die Zwischenablage zu kopieren und weiter zu verwenden.