Einführung

Dieser Artikel befasst sich mit der Integration eines Quick Response Code Scanners (QR-Code-Scanner) in einer Blazor-Anwendung mit 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 zu erstellen (verwendung der Blazor WebAssembly-Anwendung) oder C# für die Erstellung interaktiver Webschnittstellen zu verwenden, (Blazor Server, auf den 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, zu lesen, zu interpretieren und qR-Codes erzeugen mit hoher Genauigkeit. 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 Standort ein (alles andere auf den Standardwerten belassen) 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 wird hauptsächlich in der Datei Index.razor erstellt. Diese Datei, die Teil des Blazor-Server-Projekts ist, 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 <PageTitle> und `

tags definieren den Titel der Seite bzw. die Hauptüberschrift und geben den Kontext für den Benutzer vor.

Bild-Upload-Kontrolle: Ein `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 ist, wird es mit einem `tag. Diese visuelle Rückmeldung ist wichtig, damit der Benutzer sicher sein kann, dass die richtige Datei hochgeladen wurde.

Scan Button: 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 angezeigt, um die Anzeige zu erleichtern. 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 werden 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, indem sie ihm eine definierte Breite, eine zentrierte Ausrichtung und einen subtilen Schatten für Tiefe verleiht.

.file-input, .result-input: Diese Klassen gestalten die Dateieingabe- und Ergebnisanzeigeelemente und stellen sicher, dass sie visuell konsistent sind und die Breite ihres Containers vollständig ausfüllen.

.button: Die Schaltflächen sind mit einem deutlich grünen Hintergrund, abgerundeten Ecken und einem Hover-Effekt für eine bessere Benutzerinteraktion gestaltet.

.qr-image: Die auf das QR-Code-Bild angewendeten Stile umfassen Größenbeschränkungen und einen automatischen Rand für die Zentrierung, so dass das Bild hervorsticht, aber nicht erdrückend wirkt.

.result-section: Diese Klasse stellt sicher, dass die Elemente innerhalb des Ergebnisabschnitts mittig ausgerichtet sind und einen angemessenen Abstand haben.

Handhabung von Dateiuploads

Die Methode "HandleSelectedFile" ist ein entscheidender Teil des QR-Code-Scanprozesses. Sie verarbeitet die vom Benutzer hochgeladene Datei und bereitet sie zum Scannen vor. Diese Methode wird ausgelöst, wenn der Benutzer eine Datei über die `komponente. 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 Details der Datei mit Hilfe von InputFileChangeEventArgs e. Die Variable selectedFile wird dann dieser Datei zugewiesen, und der boolesche Wert fileSelected wird auf true gesetzt, was bedeutet, dass die Eingabedaten/Datei zur Verarbeitung bereit sind.

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

Generierung eines eindeutigen Dateinamens: Um Konflikte mit bestehenden Dateien zu vermeiden, wird ein eindeutiger Dateiname unter Verwendung einer GUID erzeugt (Global eindeutiger Bezeichner) mit der Erweiterung der Originaldatei angehängt. Dadurch wird sichergestellt, dass jede hochgeladene Datei einzigartigPathdentifiziert ist.

Speichern der Datei: Die Datei wird dann auf dem Server gespeichert. Die Methode erstellt einen Dateistrom, der auf den neu generierten Dateipfad verweist, und der Inhalt der hochgeladenen Datei wird mit "await selectedFile.OpenReadStream" in diesen Strom kopiert().copyToAsync(fileStream)`. Mit diesem Schritt wird der Uploadvorgang abgeschlossen.

Vorbereitung des Bildes für die 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 und konvertiert sie in eine base64-Zeichenkette, die direkt in ein Programm eingebettet werden kannattribut des Tags src. 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 Methode ScanQRCode ist das Herzstück der QR-Code-Scan-Funktionalität in der Blazor Server-Anwendung. 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 prüft die Methode, ob die Variable qrImageSrc, die den Pfad zu dem 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 Funktion `AnyBitmap.FromFile(qrImageSrc)methode, die das Bild für den Scanvorgang vorbereitet.

Der nächste Schritt besteht in der 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. Wenn die Instanz "QRReader" bereit ist, fährt die Anwendung mit dem Scannen des hochgeladenen Bildes fort. Die Funktion `Leser.Lesen(imageInput)diese Funktion ist für diese Aktion verantwortlich, indem sie das Bild systematisch nach QR-Codes durchsucht und deren Daten extrahiert.

Die Ergebnisse des Scans werden in einer IEnumerable<QrResult>sammlung. Diese Sammlung wird dann untersucht, um das erste QR-Code-Ergebnis zu finden. Wenn ein QR-Code erkannt wird und er lesbaren Text enthält, wird dieser Text erfasst und in der VariablenscannedText` 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 "In die Zwischenablage kopieren" zu aktivieren, wird in der Datei _Host.cshtml eine JavaScript-Funktion namens "CopyTextToClipboard" 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, der den zu kopierenden Text darstellt. Sie verwendet die Methode navigator.clipboard.writeText, eine moderne Methode 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 Methode CopyToClipboard befindet sich im @code-Teil der index.razor und 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 sie aktiviert ist, ruft sie die JavaScript-Funktion "CopyTextToClipboard" auf, indem sie die JavaScript-InterOp-Fähigkeiten von Blazor nutzt. Der "gescannte Text" 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 zum Hochladen der QR-Code-Bilddatei (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 ein QR-Code-Bild aus und lädt es hoch, indem er die Schaltfläche "Datei auswählen" betätigt, 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/>') ist eine URL, die angibt, wohin der QR-Code einen Benutzer führen würde, wenn er mit einem QR-Reader 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. IronQR beherrscht zwar QR-Codes, aber für Projekte, die das Scannen von Barcodes erfordern, ist dies nicht erforderlich, IronBarcode ist eine ideale Option, die ein ähnliches Maß an Einfachheit und Integration bietet.

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