如何使用WebView2抓取网页中仅视频元素的JPG图片而非整个屏幕

针对你的需求，要捕获WebView2加载页面里的video元素截图而非全屏，这里有两个实用方案，优先推荐第一种，因为它不受控件位置、页面滚动等因素影响，能直接获取视频的原始帧：

方案一：通过JavaScript捕获视频帧，传递给C#保存 #

这个思路是在前端用canvas截取video的当前帧，转成Base64格式后传给C#端，再解码保存为图片。

步骤1：在前端添加截图函数 #

可以把这段代码加到你的watch.js里，或者直接嵌入到watcher.html的<script>标签中：

function captureVideoFrame() {
  // 获取页面中的video元素
  const video = document.querySelector('video');
  if (!video || video.videoWidth === 0) {
    return null; // 未找到元素或视频还未加载
  }

  // 创建canvas并绘制当前视频帧
  const canvas = document.createElement('canvas');
  canvas.width = video.videoWidth; // 使用视频的原始宽度
  canvas.height = video.videoHeight; // 使用视频的原始高度
  const ctx = canvas.getContext('2d');
  ctx.drawImage(video, 0, 0, canvas.width, canvas.height);

  // 转成Base64格式的JPG（可调整第二个参数控制画质，0-1之间）
  return canvas.toDataURL('image/jpeg', 0.9);
}

步骤2：在C#中调用JS函数并保存图片 #

替换你原来的全屏截图函数，用这个异步方法来实现：

using System;
using System.Drawing;
using System.Drawing.Imaging;
using System.IO;
using System.Threading.Tasks;
using Microsoft.Web.WebView2.WinForms;

private async Task CaptureVideoFrameAsync(string fileName, WebView2 webView)
{
    // 执行前端的截图函数，获取Base64结果
    string base64Result = await webView.ExecuteScriptAsync("captureVideoFrame();");

    // 处理返回结果：去掉JSON引号和data URI前缀
    if (string.IsNullOrEmpty(base64Result) || base64Result == "null")
    {
        MessageBox.Show("无法捕获视频帧：未找到video元素或视频未加载完成");
        return;
    }

    string cleanBase64 = base64Result.Trim('"').Replace("data:image/jpeg;base64,", "");
    
    // 将Base64转为字节数组并保存为图片
    byte[] imageBytes = Convert.FromBase64String(cleanBase64);
    using (MemoryStream ms = new MemoryStream(imageBytes))
    {
        using (Bitmap bitmap = new Bitmap(ms))
        {
            bitmap.Save($"{fileName}.jpg", ImageFormat.Jpeg);
        }
    }
}

使用注意 #

要确保WebView2已经完全加载页面和视频，建议在NavigationCompleted事件触发后再调用这个方法，比如：

private void WebView2_NavigationCompleted(object sender, CoreWebView2NavigationCompletedEventArgs e)
{
    // 页面加载完成后，可在这里触发截图，或者通过按钮点击调用
    // _ = CaptureVideoFrameAsync("video_screenshot", webView21);
}

方案二：捕获WebView2控件的指定区域（备选） #

如果不想用JS处理，也可以先获取video元素在WebView2中的位置和尺寸，再对控件进行区域截图。但这个方案受页面滚动、控件遮挡等因素影响，可靠性稍差。

步骤1：前端获取video元素的位置信息 #

添加这个JS函数到页面中：

function getVideoBounds() {
  const video = document.querySelector('video');
  if (!video) return null;
  
  // 获取元素相对于视口的位置和尺寸
  const rect = video.getBoundingClientRect();
  return {
    x: rect.left,
    y: rect.top,
    width: rect.width,
    height: rect.height
  };
}

步骤2：C#中裁剪控件截图 #

using System.Text.Json;

// 用于反序列化位置信息的类
public class VideoBounds
{
    public double x { get; set; }
    public double y { get; set; }
    public double width { get; set; }
    public double height { get; set; }
}

private async Task CaptureVideoRegionAsync(string fileName, WebView2 webView)
{
    // 获取video元素的位置和尺寸
    string boundsJson = await webView.ExecuteScriptAsync("getVideoBounds();");
    if (string.IsNullOrEmpty(boundsJson) || boundsJson == "null")
    {
        MessageBox.Show("未找到video元素");
        return;
    }

    // 反序列化JSON到对象
    var videoBounds = JsonSerializer.Deserialize<VideoBounds>(boundsJson);
    
    // 对WebView2控件进行全屏截图
    using (Bitmap fullBitmap = new Bitmap(webView.ClientSize.Width, webView.ClientSize.Height))
    {
        webView.DrawToBitmap(fullBitmap, new Rectangle(0, 0, webView.ClientSize.Width, webView.ClientSize.Height));
        
        // 裁剪出video区域的图片
        using (Bitmap videoBitmap = fullBitmap.Clone(
            new Rectangle(
                (int)Math.Round(videoBounds.x),
                (int)Math.Round(videoBounds.y),
                (int)Math.Round(videoBounds.width),
                (int)Math.Round(videoBounds.height)),
            fullBitmap.PixelFormat))
        {
            videoBitmap.Save($"{fileName}.jpg", ImageFormat.Jpeg);
        }
    }
}

推荐优先使用方案一，因为它直接获取视频的原始分辨率帧，不受WebView2控件在屏幕上的位置、页面滚动等因素影响，稳定性更高。

内容的提问来源于stack exchange，提问作者Joseph Thompson