js使用canvas实现视频截图

这篇博客介绍了如何利用JavaScript、HTML5的canvas元素和视频播放器API(以西瓜播放器为例)来实现视频截图功能。主要内容包括:创建canvas元素,获取video元素DOM节点,设置canvas画布大小,使用drawImage()方法绘制视频帧,转换为base64格式并下载图片。还讨论了如何改进截图效果以适应播放器大小,并解决了画布污染的跨域问题,包括为video标签添加crossorigin属性以及处理视频重定向导致的跨域错误。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

使用工具

视频播放器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 坐标
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值