使用 IronBarcode 的 Blazor 條碼掃描器教程
IronBarcode 支援在 Blazor 專案上運行,以下教程展示如何在 Blazor 中使用 IronBarcode。
您可以輕鬆地從用戶的網絡攝像頭捕獲 QR 或條碼圖像。使用 Blazor 和 JavaScript 的真正強大之處在於,當您將 QR 或條碼圖像傳回到您的 C# 代碼時,您可以使用 IronBarcode 庫提取圖像的代碼值。在本教程中,我們將使用 Blazor 和 IronBarcode 從用戶的網絡攝像頭中提取捕獲的 QR 或條碼圖像的值。
在 Blazor 中如何使用條碼掃描器
- 在Blazor中安裝C#庫來掃描條碼
- 建立 Blazor 伺服器專案並新增 Razor 元件
- 使用JavaScript啟用網絡攝像頭
- 配置 圖像捕捉 將圖像發送到伺服器的方法
- 使用解碼條形碼 快速讀取一維條碼 方法和其他直觀的API
建立 Blazor 專案
打開 Visual Studio => 建立新專案 => 選擇 Blazor Server App。
設定名稱
選擇框架 .NET 6
我們已經準備好
新增 Razor 元件供攝影機使用
命名它
添加 JavaScript 以啟用網絡攝像頭
由於這個應用程式與使用者的網絡攝像頭一起使用,我希望為了隱私保護,每件事情都保留在客戶端。為所有網絡攝像頭功能添加一個命名為 webcam.js 的 javascript 檔案。
不要忘記在 index.html 文件中包含 javascript 文件。
<script src="webcam.js"></script>
<script src="webcam.js"></script>
將 javascript 網絡攝像頭初始化功能添加到 webcam.js 文件中。
// 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);
}
}
// 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);
}
}
IRON VB CONVERTER ERROR developers@ironsoftware.com
我們需要啟動用戶的網絡攝像頭。頁面加載後覆蓋 OnInitializedAsync 來進行此操作() 在 Index.razor 方法中,調用您之前編寫的 javascript initializeCamera 函數。
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 Function
現在添加播放該視頻的HTML標籤。
<section class="section">
<video autoplay id="video" width="320"></video>
</section>
<section class="section">
<video autoplay id="video" width="320"></video>
</section>
捕捉影像
要從網路攝像頭視頻源捕捉一幀,我們可以在 webcam.js 中寫一個 javascript 函數。這個函數會把當前幀從原視頻源繪製到畫布目的地。
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);
}
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);
}
它會捕捉一個畫面,然後將其編碼為64位的Base64,再將編碼後的圖像發送給ProcessImage函數,該函數會將編碼後的圖像發送到伺服器端的API進行處理。
[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 Sub
現在,我們需要在點擊「Capture Frame」按鈕時調用這個 js 函數。請記住,我們的按鈕正在尋找一個名為 CaptureFrame 的處理方法。
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 Function
IronBarcode 擷取圖像
將 IronBarcode 添加到伺服器專案。
Install-Package BarCode
現在,在伺服器專案中添加API來處理編碼圖像並提取QR或條形碼的值。下面的代碼將這個Blazor專案變成條形碼掃描器。從掃描的圖像中,我們進行預處理並將其提供給 FromStream
方法。將 Image 對象傳遞給 BarcodeReader
類中的方法,以在Blazor中掃描條形碼。然後可以從 BarcodeResult 對象的 Value 屬性中訪問結果條形碼值。
[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 = IronBarCode.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 = IronBarCode.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; }
}
IRON VB CONVERTER ERROR developers@ironsoftware.com
您可以找到範例專案 這裡.