So erstellen Sie einen Blazor QR Code Scanner

Einführung

Dieser Artikel untersucht die Integration eines QR-Code-Scanners in eine Blazor-Anwendung unter Verwendung von IronQR, einer .NET-Bibliothek. Ein QR-Code ist ein zweidimensionaler Strichcode, der viel mehr Daten speichert als ein normaler eindimensionaler Strichcode.

Blazor, ein Microsoft-Framework, ermöglicht es Entwicklern, entweder Single-Page-Apps (mithilfe der Blazor WebAssembly-App) zu erstellen oder C# zu nutzen, um interaktive Webschnittstellen zu bauen (Blazor Server, auf das wir uns in diesem Leitfaden konzentrieren werden).

Die Integration von IronQR mit Blazor Server zum Scannen von QR-Codes ist eine strategische Kombination, die die Stärken beider Technologien nutzt. Durch die Integration von IronQR in Blazor-Anwendungen können Sie die Erzeugung und das Scannen von QR-Codes effizient handhaben. Diese Funktionalität eines QR-Code-Lesegeräts wird in verschiedenen Geschäftsbereichen wie Bestandsverwaltung, Fahrkartensysteme und kontaktloser Informationsaustausch zunehmend nachgefragt.

Verstehen der Grundlagen

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-UIs mit C# anstelle von JavaScript zu erstellen. Dieses serverseitige Modell arbeitet mit Benutzerinteraktionen über eine SignalR-Verbindung, eine Echtzeit-Webfunktionalität. Dies hilft Entwicklern bei der Erstellung effektiver und interaktiver Webanwendungen.

Einführung in IronQR

IronQR ist eine .NET-Bibliothek, die sich durch ihre Fähigkeit auszeichnet, QR-Codes mit hoher Genauigkeit zu lesen, zu interpretieren und zu generieren. Es bietet eine Reihe von Funktionen, darunter die Möglichkeit, verschiedene Arten von QR-Code-Inhalten zu verarbeiten. Die Stärke von IronQR liegt in seiner Einfachheit und leichten Integrierbarkeit in .NET-Anwendungen, was es zur ersten Wahl für Entwickler macht, die QR-Code-Funktionalität einbinden und erstellen möchten.

So erstellen Sie einen Blazor QR Code Scanner

1. Erstellen einer Blazor-Server-Anwendung in Visual Studio Code

2. Installieren Sie die QR-Code-Klassenbibliothek mit NuGet Package Manager

3. Erstellen Sie die Benutzeroberfläche mit HTML und CSS in der index.razor

4. Schreiben Sie die Logik für die Verarbeitung hochgeladener Dateien

5. Schreiben Sie die QR-Scan-Logik mit der QR-Bibliothek

6. Anzeige des Ergebnisses in der Textbox

Einrichten der Umgebung

Erstellen Sie eine neue Blazor Server Anwendung

Starten Sie Visual Studio und wählen Sie "Ein neues Projekt erstellen" Suchen Sie im Projektvorlagenauswahlbildschirm die Vorlage "Blazor Server App" und wählen Sie sie aus. Klicken Sie auf Weiter.

Nachdem Sie die Vorlage ausgewählt haben, geben Sie einen Projektnamen und einen Speicherort ein (lassen Sie alle anderen Werte auf den Standardwerten) und klicken Sie auf die Schaltfläche Weiter.

Wählen Sie nun das gewünschte .NET-Framework aus und klicken Sie auf die Schaltfläche Erstellen. Es wird eine Blazor Server-Anwendung erstellt.

Installation der IronQR-Bibliothek

Klicken Sie in der Menüleiste auf Werkzeuge. Wählen Sie aus dem Dropdown-Menü den NuGet Package Manager. Wählen Sie im Kontextmenü die Option "NuGet-Pakete für Lösung verwalten". Dadurch wird die Registerkarte NuGet Package Manager geöffnet.

Suchen Sie im NuGet Package Manager auf der Registerkarte "Browse" nach "IronQR". Suchen Sie dann das Paket "IronQR" in der Liste. Klicken Sie auf die Schaltfläche "Installieren".

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

Implementierung des QR-Code-Scannens

Aufbau der Benutzeroberfläche

Die Benutzeroberfläche für den QR-Code-Scanner ist hauptsächlich in der Index.razor-Datei erstellt. Diese Datei, Teil des 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(qrImageSrc))
    {
        <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">
            <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(qrImageSrc))
    {
        <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">
            <button @onclick="CopyToClipboard" class="button copy-button">Copy</button>
        </div>
    }
</div>

'INSTANT VB WARNING: An assignment within expression was extracted from the following statement:
'ORIGINAL LINE: @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(qrImageSrc))
"image/*" Class="file-input" /> [if](Not String.IsNullOrEmpty(qrImageSrc))
'INSTANT VB WARNING: An assignment within expression was extracted from the following statement:
'ORIGINAL LINE: Friend @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
"HandleSelectedFile" accept="image/*" Class
Friend page "/" [using] System.IO [using] Microsoft.AspNetCore.Components.Forms [using] IronQr [using] IronSoftware.Drawing inject IJSRuntime JSRuntime (Of PageTitle) QR Code Scanner</PageTitle> (Of div) (Of h1) QR Code Scanner</h1> <InputFile OnChange="HandleSelectedFile" accept
'INSTANT VB WARNING: An assignment within expression was extracted from the following statement:
'ORIGINAL LINE: <img src="@qrImageSrcForDisplay" alt="QR Code Image" class="qr-image" />
		"QR Code Image" class="qr-image" />
'INSTANT VB WARNING: An assignment within expression was extracted from the following statement:
'ORIGINAL LINE: <img src="@qrImageSrcForDisplay" alt="QR Code Image" class
		"@qrImageSrcForDisplay" alt="QR Code Image" class
		<img src="@qrImageSrcForDisplay" alt
End Class
'INSTANT VB WARNING: An assignment within expression was extracted from the following statement:
'ORIGINAL LINE: <button onclick="ScanQRCode" disabled="@(!fileSelected)" class="button scan-button"> Scan QR Code</button> if(!string.IsNullOrEmpty(scannedText))
	"@(!fileSelected)" class="button scan-button"> Scan QR Code</button> [if](Not String.IsNullOrEmpty(scannedText))
	If True Then
'INSTANT VB WARNING: An assignment within expression was extracted from the following statement:
'ORIGINAL LINE: <button onclick="ScanQRCode" disabled="@(!fileSelected)" class
	"ScanQRCode" disabled="@(!fileSelected)" class
	<button onclick="ScanQRCode" disabled
'INSTANT VB WARNING: An assignment within expression was extracted from the following statement:
'ORIGINAL LINE: <div class="result-section"> <button onclick="CopyToClipboard" class="button copy-button"> Copy</button> </div>
		"CopyToClipboard" class="button copy-button"> Copy</button> </div>
'INSTANT VB WARNING: An assignment within expression was extracted from the following statement:
'ORIGINAL LINE: <div class="result-section"> <button onclick="CopyToClipboard" class
		"result-section"> <button onclick="CopyToClipboard" class
		<div class="result-section"> <button onclick
	End If
'INSTANT VB TODO TASK: The following line uses invalid syntax:
'</div>

Titel und Überschrift: Die Tags <PageTitle> und <h1> definieren den Titel der Seite und die Hauptüberschrift und legen somit den Kontext für den Nutzer fest.

Bild-Upload-Steuerung: Eine <InputFile>-Komponente wird zum Hochladen von QR-Code-Bildern verwendet. Dieses Element ist so gestaltet, dass es nur Bilddateien akzeptiert und die Benutzerfreundlichkeit durch das Herausfiltern nicht relevanter Dateitypen verbessert.

Bildanzeige: Sobald ein Bild hochgeladen wurde, wird es mit einem <img>-Tag angezeigt. Diese visuelle Rückmeldung ist wichtig, damit der Benutzer sicher sein kann, dass die richtige Datei hochgeladen wurde.

Scan-Schaltfläche: Eine mit @onclick="ScanQRCode" markierte Schaltfläche löst den Scanvorgang aus. Ihre Verfügbarkeit hängt davon ab, ob eine Datei ausgewählt ist, was die Intuitivität der Schnittstelle erhöht.

Ergebnisanzeige: Der Text des gescannten QR-Codes wird in einem Texteingabefeld zur einfachen Ansicht angezeigt. Mit einer separaten Schaltfläche kann der Benutzer diesen Text in die Zwischenablage kopieren.

CSS-Styling in site.css

Die visuelle Ästhetik und das Layout des QR-Code-Scanners sind in der Datei site.css 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 Hauptinhaltsbereich, verleiht ihm eine definierte Breite, zentrierte Ausrichtung und einen subtilen Schatten für Tiefe.

.file-input, .result-input: Diese Klassen gestalten die Datei-Eingabe- und Ergebnisanzeige-Elemente, um sicherzustellen, dass sie visuell konsistent sind und die Breite ihres Containers vollständig ausfüllen.

.button: Buttons sind mit einem auffälligen grünen Hintergrund, abgerundeten Ecken und einem Hover-Effekt für eine bessere Benutzerinteraktion gestaltet.

.qr-image: Auf das QR-Code-Bild angewendete Stile beinhalten Größenbeschränkungen und automatischen Rand für die Zentrierung, wodurch das Bild hervorstechend, aber nicht überwältigend wird.

.result-section: Diese Klasse sorgt dafür, dass die Elemente innerhalb des Ergebnisbereichs zentral ausgerichtet und angemessen beabstandet sind.

Handhabung von Dateiuploads

Die HandleSelectedFile-Methode ist ein wesentlicher Bestandteil des QR-Code-Scanprozesses. Sie bearbeitet das Hochladen der Datei durch den Benutzer und bereitet sie für den Scan vor. 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 finden Sie eine detaillierte Aufschlüsselung der Funktionen:

Dateiauswahl und Validierung: Wenn ein Benutzer eine Datei hochlädt, erfasst die Methode die Dateidetails mithilfe von InputFileChangeEventArgs. Die Variable selectedFile wird dann dieser Datei zugewiesen, und ein boolescher Wert fileSelected wird auf true gesetzt, was darauf hinweist, dass die Eingabedaten/Datei bereit zur Verarbeitung ist.

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

Erzeugen eines eindeutigen Dateinamens: Um Konflikte mit vorhandenen Dateien zu vermeiden, wird ein eindeutiger Dateiname generiert, indem eine GUID (Globally Unique Identifier) mit der Erweiterung der ursprünglichen Datei angehängt wird. Dies stellt sicher, dass jede hochgeladene Datei uniquePathdentified ist.

Speichern der Datei: Die Datei wird anschließend 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 mithilfe von await selectedFile.OpenReadStream().CopyToAsync(fileStream) kopiert. Mit diesem Schritt wird der Uploadvorgang abgeschlossen.

Vorbereitung des Bildes zur Anzeige: Nachdem die Datei gespeichert wurde, muss das Bild dem Benutzer zur Bestätigung angezeigt werden. Die Methode liest die Datei in ein Byte-Array ein und wandelt sie in einen Base64-String um, der sich für die direkte Einbettung in das src-Attribut eines <img>-Tags eignet. Durch diese Umwandlung kann das Bild angezeigt werden, ohne dass eine separate Anfrage an den Server für die Bilddatei erforderlich ist.

Scannen des QR-Codes

Die ScanQRCode-Methode ist das Herzstück der QR-Code-Scan-Funktionalität in der Blazor-Serveranwendung. Bei dieser Methode wird das hochgeladene Bild genommen und IronQR verwendet, um die QR-Code-Daten 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

Zunächst überprüft die Methode, ob die Variable qrImageSrc, die den Pfad zum hochgeladenen Bild enthält, nicht leer ist. Diese Prüfung stellt sicher, dass ein gültiges Bild vorhanden ist, mit dem gearbeitet werden kann, bevor Sie fortfahren.

Sobald bestätigt wird, dass ein Bild für die Verarbeitung bereit ist, geht die Methode zur Kernfunktion des QR-Code-Lesens über. Dazu sind einige wichtige Schritte erforderlich, angefangen mit dem Laden des Bildes von seinem Speicherort in ein für die QR-Code-Analyse geeignetes Format. Diese Umwandlung wird durch die Methode AnyBitmap.FromFile(qrImageSrc) ermöglicht, die das Bild für den Scanvorgang vorbereitet.

Der nächste Schritt umfasst die Erstellung eines QrReader-Objekts. Dieses Objekt ist ein wesentlicher Bestandteil der IronQR-Bibliothek und dient als primäres Werkzeug zur Dekodierung von QR-Codes aus Bildern. Mit der QrReader-Instanz bereit fährt die Anwendung fort, das hochgeladene Bild zu scannen. Die Funktion reader.Read(imageInput) ist für diese Aktion verantwortlich, indem sie systematisch das Bild nach QR-Codes durchsucht und deren Daten extrahiert.

Die Ergebnisse des Scans werden in einer IEnumerable<QrResult>-Sammlung gespeichert. Diese Sammlung wird dann untersucht, 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 Variablen scannedText gespeichert. Wenn jedoch ein QR-Code entweder nicht gefunden wird oder keinen Text enthält, setzt die Anwendung eine Standardmeldung, um den Benutzer zu informieren, dass kein QR-Wert erkannt wurde.

Sobald der QR-Code erfolgreich gescannt wurde, wird die Textzeichenfolge in einem Texteingabefeld angezeigt, dank der bidirektionalen Datenbindung von Blazor. Dies wird erreicht, indem die Variable scannedText an ein Texteingabeelement gebunden wird. Das Eingabefeld ist deaktiviert, d. h. es ist schreibgeschützt. Diese Designentscheidung konzentriert die Interaktion des Nutzers auf das Anzeigen und Kopieren des Ergebnisses und nicht auf die Bearbeitung des Inhalts.

Der gesamte Scanvorgang wird von einem Try-Catch-Block umschlossen, der vor unvorhergesehenen Fehlern während des Scanvorgangs schützt. Dazu können Probleme mit dem Bilddateiformat oder unerwartete Fehler während des Lesevorgangs gehören. Wenn eine Ausnahme auftritt, wird sie abgefangen und eine Fehlermeldung formuliert und dem Benutzer angezeigt. Dieser Ansatz hilft nicht nur bei der Identifizierung von Problemen, sondern sorgt auch für Transparenz gegenüber dem Benutzer und erhöht die Zuverlässigkeit der Anwendung.

Kopieren des Ergebnisses

Um die Funktion "Kopieren in Zwischenablage" zu aktivieren, wird eine JavaScript-Funktion namens copyTextToClipboard in der Datei _Host.cshtml definiert. Dieses Skript ist eine einfache, aber effektive Methode, um 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>

js

Diese Funktion akzeptiert einen Textparameter, der den zu kopierenden Text darstellt. Es verwendet die Methode navigator.clipboard.writeText, einen modernen Ansatz zur Interaktion mit der Zwischenablage. Diese Methode wird wegen ihrer Einfachheit und der Einhaltung von Webstandards bevorzugt. Es ist so konzipiert, dass bei erfolgreichem Kopieren eine Erfolgsmeldung in der Konsole protokolliert wird, was bei der Fehlersuche hilft und eine reibungslose Funktionalität gewährleistet. Im Falle eines Fehlers wird eine Fehlermeldung auf der Konsole protokolliert, die Aufschluss über alle während des Vorgangs aufgetretenen Probleme gibt.

Die CopyToClipboard-Methode im @code-Teil der index.razor dient als Brücke zwischen der Blazor-App und der JavaScript-Funktion. Eine Schaltfläche löst den Klick auf diese Methode in der Benutzeroberfläche aus. Wenn aktiviert, ruft es die JavaScript-Funktion copyTextToClipboard unter Verwendung der JavaScript-InterOp-Fähigkeiten von Blazor auf. Der scannedText wird als Argument an diese Funktion übergeben, wodurch der Text effektiv in die Zwischenablage des Benutzers kopiert wird.

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ühren der Anwendung

Wenn Sie das Projekt starten, sehen Sie die folgende übersichtliche und einfache Benutzeroberfläche. Auf dem Startbildschirm ist das Modul QR-Code-Scanner gut zu erkennen. Dieses Modul enthält eine Schaltfläche, um die QR-Code-Bilddatei hochzuladen ('Datei auswählen'), und eine weitere, um den Scanvorgang zu starten ('QR-Code scannen'). Zu Beginn ist keine Datei ausgewählt, und der Scanbereich ist leer und wartet auf Benutzereingaben.

Der Benutzer wählt und lädt ein QR-Code-Bild über die Schaltfläche 'Datei auswählen' hoch, die nun den Namen der ausgewählten Datei anzeigt (z. B. 'qrvalue.png'). Der hochgeladene QR-Code ist in dem dafür vorgesehenen Bereich auf der Benutzeroberfläche sichtbar und bestätigt dem Benutzer, dass das Bild zum Scannen bereit ist.

Nachdem der Benutzer auf die Schaltfläche "QR-Code scannen" geklickt hat, verarbeitet die Anwendung das Bild. Wenn der Scan erfolgreich war, 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 der QR-Code einen Benutzer leiten würde, wenn er mit einem QR-Leser gescannt wird. Neben dem Ergebnis erscheint die Schaltfläche Kopieren, mit der der Benutzer den gescannten Text zur weiteren Verwendung einfach in die Zwischenablage kopieren kann.

Schlussfolgerung

Zusammenfassend lässt sich sagen, dass die Integration des IronQR in eine Blazor Server-Anwendung reibungslos und effektiv verläuft und zu einer QR-Code-Scanlösung führt. Reaktionsschnell und benutzerfreundlich, von der Einrichtung dieses Projekts bis zur Implementierung der Scan-Funktionalität, dank einer Mischung aus der leistungsstarken Verarbeitung von IronQR und dem dynamischen UI-Rendering von Blazor. Der Prozess, von der Einrichtung der Umgebung bis zur Bereitstellung, unterstreicht die Praktikabilität und Effektivität dieser Integration in realen Anwendungen. Während IronQR geschickt im Umgang mit QR-Codes ist, ist für Projekte, die die Barcode-Scan-Funktion erfordern, IronBarcode eine ideale Option, die ein ähnliches Maß an Einfachheit und Integration bietet.

IronQR bietet eine kostenlose Testversion für Entwickler an, um seine Funktionen vor dem Kauf zu erkunden. Für die erweiterte Nutzung und den Zugriff auf alle professionellen Funktionen in der Produktion beginnen die Lizenzen für IronQR bei $749.