Demonstrates the use of the Nuget packages OpenCVSharp4 and OpenCvSharp4.runtime.wasm in Blazor WebAssembly.
- Canny edge detection on an image.
- Haar cascade face and eye detection with video and webcam sources.
Includes tools for working with OpenCVSharp4 in Blazor WebAssembly including Mat extension methods, and a VideoCapture class for working with <video>
elements.
In the below Canny edge detection example the Mat extension method LoadImageURL loads an image from a URL into the Mat. And the Mat extension method DrawOnCanvas draws a Mat onto a canvas 2D context.
@using SpawnDev.BlazorJS.JSObjects
@using OpenCvSharp
<canvas style="zoom: 50%; border: 1px solid grey;" @ref=canvasSrcRef></canvas>
<canvas style="zoom: 50%; border: 1px solid grey;" @ref=canvasDestRef></canvas>
@code {
ElementReference canvasSrcRef;
ElementReference canvasDestRef;
string TestImage = "https://i.imgur.com/WOZagma.jpeg";
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
{
using var canvasSrcEl = new HTMLCanvasElement(canvasSrcRef);
using var canvasSrcCtx = canvasSrcEl.Get2DContext();
using var canvasDestEl = new HTMLCanvasElement(canvasDestRef);
using var canvasDestCtx = canvasDestEl.Get2DContext();
using var src = new Mat();
await src.LoadImageURL(TestImage);
src.DrawOnCanvas(canvasSrcCtx, true);
using var dst = new Mat();
Cv2.Canny(src, dst, 50, 200);
dst.DrawOnCanvas(canvasDestCtx, true);
}
}
}