Blazor 使用 Blazor 拍摄视频流快照/使用 Blazor Interop 与 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

}