{"id":21015575,"url":"https://github.com/lostbeard/spawndev.blazorjs.opencvsharp4","last_synced_at":"2025-06-20T23:35:33.286Z","repository":{"id":195683840,"uuid":"693350961","full_name":"LostBeard/SpawnDev.BlazorJS.OpenCVSharp4","owner":"LostBeard","description":"OpenCVSharp4 for Blazor WebAssembly","archived":false,"fork":false,"pushed_at":"2024-07-23T15:42:13.000Z","size":35940,"stargazers_count":8,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-06-18T23:46:17.370Z","etag":null,"topics":["blazor","blazor-webassembly","csharp","dotnet","opencv","opencv4","webassembly"],"latest_commit_sha":null,"homepage":"https://lostbeard.github.io/SpawnDev.BlazorJS.OpenCVSharp4/","language":"C#","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/LostBeard.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":["LostBeard"],"patreon":null,"open_collective":null,"ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"lfx_crowdfunding":null,"polar":null,"buy_me_a_coffee":null,"custom":null}},"created_at":"2023-09-18T21:21:20.000Z","updated_at":"2024-07-23T15:42:16.000Z","dependencies_parsed_at":null,"dependency_job_id":"b292e64b-c257-4458-9a96-07aeb6dab3ad","html_url":"https://github.com/LostBeard/SpawnDev.BlazorJS.OpenCVSharp4","commit_stats":null,"previous_names":["lostbeard/spawndev.blazorjs.opencvsharp4"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/LostBeard/SpawnDev.BlazorJS.OpenCVSharp4","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LostBeard%2FSpawnDev.BlazorJS.OpenCVSharp4","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LostBeard%2FSpawnDev.BlazorJS.OpenCVSharp4/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LostBeard%2FSpawnDev.BlazorJS.OpenCVSharp4/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LostBeard%2FSpawnDev.BlazorJS.OpenCVSharp4/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/LostBeard","download_url":"https://codeload.github.com/LostBeard/SpawnDev.BlazorJS.OpenCVSharp4/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LostBeard%2FSpawnDev.BlazorJS.OpenCVSharp4/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":261037048,"owners_count":23100933,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["blazor","blazor-webassembly","csharp","dotnet","opencv","opencv4","webassembly"],"created_at":"2024-11-19T10:10:27.664Z","updated_at":"2025-06-20T23:35:28.271Z","avatar_url":"https://github.com/LostBeard.png","language":"C#","funding_links":["https://github.com/sponsors/LostBeard"],"categories":[],"sub_categories":[],"readme":"# SpawnDev.BlazorJS.OpenCVSharp4.Demo\n\n[Live Demo](https://lostbeard.github.io/SpawnDev.BlazorJS.OpenCVSharp4/)\n\nDemonstrates 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. \n\n### Demos  \n- Canny edge detection on an image.\n- Haar cascade face and eye detection with video and webcam sources.\n\n[OpenCVSharp4 repo](https://github.com/shimat/opencvsharp)\n\n# SpawnDev.BlazorJS.OpenCVSharp4\n\nIncludes tools for working with OpenCVSharp4 in Blazor WebAssembly including Mat extension methods, and a VideoCapture class for working with ```\u003cvideo\u003e``` elements.\n\nIn 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.\n\n```html\n@using SpawnDev.BlazorJS.JSObjects\n@using OpenCvSharp\n\n\u003ccanvas style=\"zoom: 50%; border: 1px solid grey;\" @ref=canvasSrcRef\u003e\u003c/canvas\u003e\n\u003ccanvas style=\"zoom: 50%; border: 1px solid grey;\" @ref=canvasDestRef\u003e\u003c/canvas\u003e\n```\n```cs\n@code {\n    ElementReference canvasSrcRef;\n    ElementReference canvasDestRef;\n    string TestImage = \"https://i.imgur.com/WOZagma.jpeg\";\n\n    protected override async Task OnAfterRenderAsync(bool firstRender)\n    {\n        if (firstRender)\n        {\n            using var canvasSrcEl = new HTMLCanvasElement(canvasSrcRef);\n            using var canvasSrcCtx = canvasSrcEl.Get2DContext();\n            using var canvasDestEl = new HTMLCanvasElement(canvasDestRef);\n            using var canvasDestCtx = canvasDestEl.Get2DContext();\n            using var src = new Mat();\n            await src.LoadImageURL(TestImage);\n            src.DrawOnCanvas(canvasSrcCtx, true);\n            using var dst = new Mat();\n            Cv2.Canny(src, dst, 50, 200);\n            dst.DrawOnCanvas(canvasDestCtx, true);\n        }\n    }\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flostbeard%2Fspawndev.blazorjs.opencvsharp4","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flostbeard%2Fspawndev.blazorjs.opencvsharp4","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flostbeard%2Fspawndev.blazorjs.opencvsharp4/lists"}