Blazor делает снимок видеопотока с помощью Blazor / взаимодействует с javascript с помощью Blazor Interop

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, и установите идентификатор для вашего видеоэлемента

<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>

Создайте файл javascript «interop. js» в папке wwwroot

//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.cs html

<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

}