https://github.com/lostbeard/spawndev.blazorjs.opencvsharp4

OpenCVSharp4 for Blazor WebAssembly
https://github.com/lostbeard/spawndev.blazorjs.opencvsharp4

blazor blazor-webassembly csharp dotnet opencv opencv4 webassembly

Last synced: about 9 hours ago
JSON representation

OpenCVSharp4 for Blazor WebAssembly

• Host: GitHub
• URL: https://github.com/lostbeard/spawndev.blazorjs.opencvsharp4
• Owner: LostBeard
• License: mit
• Created: 2023-09-18T21:21:20.000Z (about 1 year ago)
• Default Branch: main
• Last Pushed: 2024-07-23T15:42:13.000Z (4 months ago)
• Last Synced: 2024-07-23T18:23:35.643Z (4 months ago)
• Topics: blazor, blazor-webassembly, csharp, dotnet, opencv, opencv4, webassembly
• Language: C#
• Homepage: https://lostbeard.github.io/SpawnDev.BlazorJS.OpenCVSharp4/
• Size: 34.3 MB
• Stars: 8
• Watchers: 1
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE.txt

Awesome Lists containing this project

README

        
# SpawnDev.BlazorJS.OpenCVSharp4.Demo

[Live Demo](https://lostbeard.github.io/SpawnDev.BlazorJS.OpenCVSharp4/)

Demonstrates the use of the Nuget packages [OpenCVSharp4](https://www.nuget.org/packages/OpenCvSharp4) and [OpenCvSharp4.runtime.wasm](https://www.nuget.org/packages/OpenCvSharp4.runtime.wasm/) in Blazor WebAssembly. 

### Demos  

- Canny edge detection on an image.

- Haar cascade face and eye detection with video and webcam sources.

[OpenCVSharp4 repo](https://github.com/shimat/opencvsharp)

# SpawnDev.BlazorJS.OpenCVSharp4

Includes tools for working with OpenCVSharp4 in Blazor WebAssembly including Mat extension methods, and a VideoCapture class for working with `````` 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.

```html

@using SpawnDev.BlazorJS.JSObjects

@using OpenCvSharp

```

```cs

@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);

        }

    }

}

```