Blazor使用Blazor拍摄视频流快照/使用BlazorInterop与javascript交互

Question

我是blazor的新手，我的视频标签中播放了一段视频。我想把这个视频剪辑的jpg或png快照保存为图片。

我正在想办法和Blazor一起做这件事。我需要帮助，因为我不知道从哪里开始。

<video width="320" height="240" controls>
<source src="https://www.w3schools.com/tags/movie.mp4" type="video/mp4">
</video>

<button class="btn btn-success" @onclick="TakePicture">Create Profile Picture</button>
<canvas id="PicCanvas" style="display :none"></canvas>

System.Drawing似乎不起作用——它不是这个框架中的参考，但可能是错误的方法。我需要一些指导。谢谢

async Task TakePicture()
{
System.Drawing.img =
System.Drawing.Image

}

Answer 1

您可以通过以下方式使用画布来满足您的需求

首先，在html中添加一个不可见的画布，并为视频元素设置一个id

<video id="video" width="320" height="240" controls>
<source src="https://www.w3schools.com/tags/movie.mp4" type="video/mp4">
</video>
<canvas id="capturedImage" width="200" height="200" style="display: none"></canvas>

在wwwroot文件夹中创建一个javascript文件"interop.js">

//DrawImage
window.Snap = async (src, dest) => {
let video = document.getElementById(src);
let ctx = get2DContext(dest);
ctx.drawImage(video, 0, 0, 400, 240);
}
// Get image as base64 string
window.GetImageData = async (el, format) => {
let canvas = document.getElementById(el);
let dataUrl = canvas.toDataURL(format);
return dataUrl.split(',')[1];
}
// Helper functions
function get2DContext(el) {
return document.getElementById(el).getContext('2d');
}

不要忘记在_host.cshtml 中注册您的脚本

<script src="interop.js"></script>

然后，在你的剃刀页面上，你可以进行类似的捕获

...
@inject IJSRuntime JsRuntime

async Task TakePicture()
{
await JsRuntime.InvokeVoidAsync("Snap", "video", "capturedImage");
var imageBytes = await JsRuntime.InvokeAsync<string>("GetImageData", "capturedImage", "image/jpeg");
var data = Convert.FromBase64String(imageBytes); // get the image as byte array
}