Verwendung von IronBarcode mit Blazor
Dieser Anleitung enthält detaillierte Anweisungen zur Integration von IronBarcode in ein Blazor-Projekt. Als Beispiel verwenden wir IronBarcode in einer Blazor-App, um Barcodes/QR-Codes zu scannen, die von der Webcam eines Nutzers erfasst wurden.
Verwendung des Barcode-Scanners in Blazor
- Install C# library to scan barcodes in Blazor
- Erstellen Sie ein Blazor-Serverprojekt und fügen Sie eine neue Razor-Komponente hinzu.
- Webcam mit JavaScript aktivieren
- Konfigurieren Sie die Bilderfassungsmethode, um Bilder an den Server zu senden
- Decodieren Sie Barcodes mithilfe der BarcodeReader.Read-Methode
Blazor-Projekt erstellen
Öffnen Sie Visual Studio => Neues Projekt erstellen => Blazor Server-App:
Legen Sie einen Projektnamen und einen Speicherort fest:
Wählen Sie das .NET 6 Framework (oder eine andere moderne Standard .NET-Version):
Und wir sind bereit:
Um Webcam-Unterstützung hinzuzufügen, fügen Sie eine neue Razor-Komponente hinzu:
Geben Sie ihm einen Namen und klicken Sie dann auf Hinzufügen:
Webcam-Funktionalität mit JavaScript aktivieren
Da diese App mit der Webcam eines Benutzers arbeitet, sollte die Verarbeitung zur Wahrung der Privatsphäre auf der Client-Seite erfolgen. Fügen Sie dem Projekt eine JavaScript-Datei hinzu, um die Webcam-Funktionalität zu verwalten, und benennen Sie sie webcam.js:
Vergessen Sie nicht, einen Verweis auf webcam.js in index.html aufzunehmen:
<script src="webcam.js"></script> <script src="webcam.js"></script>Fügen Sie den folgenden Code zu webcam.js hinzu:
// current video stream
let videoStream;
async function initializeCamera()
{
const canvas = document.querySelector("#canvas");
const video = document.querySelector("#video");
if (
!"mediaDevices" in navigator
!"getUserMedia" in navigator.mediaDevices
)
{
alert("Camera API is not available in your browser");
return;
}
// video constraints
const constraints = {
video: {
width: {
min: 180
},
height: {
min: 120
},
},
};
constraints.video.facingMode = useFrontCamera ? "user" : "environment";
try
{
videoStream = await navigator.mediaDevices.getUserMedia (constraints);
video.srcObject = videoStream;
}
catch (err)
{
alert("Could not access the camera" + err);
}
}Wir müssen die Webcam des Benutzers öffnen. Gehen Sie vor und tun Sie dies, wenn die Seite geladen wird, indem Sie die Methode OnInitializedAsync() von Index.razor überschreiben. Rufen Sie die JavaScript-Funktion initializeCamera() auf, die Sie zuvor geschrieben haben.
protected override async Task OnInitializedAsync()
{
await JSRuntime.InvokeVoidAsync("initializeCamera");
}protected override async Task OnInitializedAsync()
{
await JSRuntime.InvokeVoidAsync("initializeCamera");
}Protected Overrides Async Function OnInitializedAsync() As Task
Await JSRuntime.InvokeVoidAsync("initializeCamera")
End FunctionFügen Sie nun HTML-Tags hinzu, die den Webcam-Videostream ausführen:
<section class="section">
<video autoplay id="video" width="320"></video>
</section><section class="section">
<video autoplay id="video" width="320"></video>
</section>Erfassen Sie das Bild
Um einen Frame aus dem Webcam-Video-Feed aufzunehmen, schreiben wir eine weitere JavaScript-Funktion in webcam.js. Mit dieser Funktion wird das aktuelle Bild von der Videoquelle auf die Leinwand gezeichnet.
function getFrame(dotNetHelper)
{
canvas.width = video.videoWidth;
canvas.height = video.videoHeight;
canvas.getContext('2d').drawImage(video, 0, 0);
let dataUrl = canvas.toDataURL("image/png");
//Invoke ProcessImage Function and send DataUrl as a parameter to it
dotNetHelper.invokeMethodAsync('ProcessImage', dataUrl);
}Diese Funktion wird einen Frame erfassen, ihn in Base64 kodieren und dann das kodierte Bild an eine Methode in C# namens ProcessImage() senden. Die ProcessImage()-Methode ist die folgende: Sie sendet das kodierte Bild an die Server-Side-API, um es zu verarbeiten.
[JSInvokable]
public async void ProcessImage(string imageString)
{
var imageObject = new CamImage();
imageObject.imageDataBase64 = imageString;
var jsonObj = System.Text.Json.JsonSerializer.Serialize(imageObject);
//Do image processing here
var barcodeeResult = await Http.PostAsJsonAsync($"Ironsoftware/ReadBarCode", imageObject);
if (barcodeeResult.StatusCode == System.Net.HttpStatusCode.OK)
{
QRCodeResult = barcodeeResult.Content.ReadAsStringAsync().Result;
StateHasChanged();
}
}[JSInvokable]
public async void ProcessImage(string imageString)
{
var imageObject = new CamImage();
imageObject.imageDataBase64 = imageString;
var jsonObj = System.Text.Json.JsonSerializer.Serialize(imageObject);
//Do image processing here
var barcodeeResult = await Http.PostAsJsonAsync($"Ironsoftware/ReadBarCode", imageObject);
if (barcodeeResult.StatusCode == System.Net.HttpStatusCode.OK)
{
QRCodeResult = barcodeeResult.Content.ReadAsStringAsync().Result;
StateHasChanged();
}
}<JSInvokable>
Public Async Sub ProcessImage(ByVal imageString As String)
Dim imageObject = New CamImage()
imageObject.imageDataBase64 = imageString
Dim jsonObj = System.Text.Json.JsonSerializer.Serialize(imageObject)
'Do image processing here
Dim barcodeeResult = Await Http.PostAsJsonAsync($"Ironsoftware/ReadBarCode", imageObject)
If barcodeeResult.StatusCode = System.Net.HttpStatusCode.OK Then
QRCodeResult = barcodeeResult.Content.ReadAsStringAsync().Result
StateHasChanged()
End If
End SubEs übernimmt das Senden des kodierten Bildes von getFrame() in JavaScript an eine serverseitige API zur Verarbeitung.
Als nächstes müssen wir diese JavaScript-Funktion aufrufen, wenn der Frame erfassen-Button geklickt wird. Denken Sie daran, dass unser Button nach einer Handler-Funktion mit dem Namen CaptureFrame sucht.
private async Task CaptureFrame()
{
await JSRuntime.InvokeAsync<String>("getFrame", DotNetObjectReference.Create(this));
}private async Task CaptureFrame()
{
await JSRuntime.InvokeAsync<String>("getFrame", DotNetObjectReference.Create(this));
}Private Async Function CaptureFrame() As Task
Await JSRuntime.InvokeAsync(Of String)("getFrame", DotNetObjectReference.Create(Me))
End FunctionIronBarcode Erfasstes Bild extrahieren
Fügen Sie das IronBarcode NuGet-Paket zum Serverprojekt hinzu:
Install-Package BarCode
Fügen Sie nun im Serverprojekt eine API-Methode hinzu, um das kodierte Bild zu verarbeiten und den Barcode/QR-Wert zu extrahieren. Der folgende Code fügt dem Blazor-Projekt eine Barcode-Lesefunktion hinzu. Aus dem gescannten Bild führen wir eine Bildvorverarbeitung durch und speisen es in die FromStream-Methode ein. Geben Sie das Image-Objekt in eine Methode der BarcodeReader-Klasse ein, um den Barcode in Blazor zu scannen. Der resultierende Barcode-Wert ist dann über die Value-Eigenschaft des BarcodeResult-Objekts zugänglich.
[HttpPost]
[Route("ReadBarCode")]
public string ReadBarCode(CamImage imageData)
{
try
{
var splitObject = imageData.imageDataBase64.Split(',');
byte [] imagebyteData = Convert.FromBase64String((splitObject.Length > 1) ? splitObject [1] : splitObject [0]);
IronBarCode.License.LicenseKey = "Key";
using (var ms = new MemoryStream(imagebyteData))
{
Image barcodeImage = Image.FromStream(ms);
var result = BarcodeReader.Read(barcodeImage);
if (result == null
result.Value == null)
{
return $"{DateTime.Now} : Barcode is Not Detetced";
}
return $"{DateTime.Now} : Barcode is ({result.Value})";
}
}
catch (Exception ex)
{
return $"Exception is {ex.Message}";
}
}
//Post Object
public class CamImage
{
public string imageDataBase64 { get; set; }
}[HttpPost]
[Route("ReadBarCode")]
public string ReadBarCode(CamImage imageData)
{
try
{
var splitObject = imageData.imageDataBase64.Split(',');
byte [] imagebyteData = Convert.FromBase64String((splitObject.Length > 1) ? splitObject [1] : splitObject [0]);
IronBarCode.License.LicenseKey = "Key";
using (var ms = new MemoryStream(imagebyteData))
{
Image barcodeImage = Image.FromStream(ms);
var result = BarcodeReader.Read(barcodeImage);
if (result == null
result.Value == null)
{
return $"{DateTime.Now} : Barcode is Not Detetced";
}
return $"{DateTime.Now} : Barcode is ({result.Value})";
}
}
catch (Exception ex)
{
return $"Exception is {ex.Message}";
}
}
//Post Object
public class CamImage
{
public string imageDataBase64 { get; set; }
}<HttpPost>
<Route("ReadBarCode")>
Public Function ReadBarCode(ByVal imageData As CamImage) As String
Try
Dim splitObject = imageData.imageDataBase64.Split(","c)
Dim imagebyteData() As Byte = Convert.FromBase64String(If(splitObject.Length > 1, splitObject (1), splitObject (0)))
IronBarCode.License.LicenseKey = "Key"
Using ms = New MemoryStream(imagebyteData)
Dim barcodeImage As Image = Image.FromStream(ms)
Dim result = BarcodeReader.Read(barcodeImage)
If result Is Nothing result.Value Is Nothing Then
Return $"{DateTime.Now} : Barcode is Not Detetced"
End If
Return $"{DateTime.Now} : Barcode is ({result.Value})"
End Using
Catch ex As Exception
Return $"Exception is {ex.Message}"
End Try
End Function
'Post Object
Public Class CamImage
Public Property imageDataBase64() As String
End ClassSie können das Beispielprojekt hier finden.
