js使用canvas实现视频截图

使用工具

视频播放器API：西瓜播放器

截图：canvas

---

实现步骤

1. 创建 canvas 元素，创建 canvas 上下文对象

const canvas = document.createElement('canvas');
const canvasCtx = canvas.getContext('2d');

2. 获取 video 元素 DOM节点，在 React 中也可以使用 useRef 获取

const video = document.getElementById('mse')?.firstElementChild;

3. 设置 canvas 画布宽高（此处设置为画布宽高与视频宽高相同）

canvas.width = video.videoWidth;
canvas.height = video.videoHeight;

4. 使用 drawImage() 方法将视频画面画在 canvasCtx 上

drawImage() 参数介绍

drawImage(image, dx, dy)

drawImage(image, dx, dy, dw, dh)

drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)

• image：必选，要截取的 image 或者 video 元素
• sx：可选，被截取图片的裁剪开始位置的 x 坐标