canvas视频帧处理核心是浏览器端实时抓取—绘制—处理—显示：先连接video与canvas，监听play/canplay事件确保就绪；用requestanimationframe逐帧drawimage；再通过getimagedata获取像素数据进行灰度等处理，最后putimagedata生效；单帧截图则跳转currenttime后drawimage再toblob导出。
Canvas 处理视频帧绘制，核心是把视频当作动态图像流，一帧一帧“抓取—绘制—处理—显示”。整个过程不依赖后端，全部在浏览器中实时完成。
视频与 Canvas 的基础连接
先确保页面中有 <video></video> 和 <canvas></canvas> 元素，两者尺寸最好一致。用 getContext('2d') 获取 2D 绘图上下文后，关键一步是监听视频的 play 或 canplay 事件——只有视频准备好（元数据加载完成、首帧可读）才能开始绘制。
- 设置
video.muted = true和video.autoplay = true，规避现代浏览器对自动播放音频的限制 - 用
video.videoWidth/video.videoHeight动态设置 canvas 尺寸，避免拉伸或裁剪失真 - 不要在视频未就绪时调用
drawImage()，否则画布可能为空白
逐帧绘制与 requestAnimationFrame 循环
视频播放时，需持续将当前画面绘制到 canvas 上。推荐使用 requestAnimationFrame 而非 setInterval，因为它与屏幕刷新率同步，更流畅、更省资源。
- 在
video.onplay中启动绘制循环，例如：video.addEventListener('play', () => requestAnimationFrame(drawFrame)) - 每次循环中先调用
ctx.drawImage(video, 0, 0, canvas.width, canvas.height)把当前帧“印”到画布 - 绘制后立即再次调用
requestAnimationFrame(drawFrame)，形成稳定帧循环 - 注意检查
!video.paused && !video.ended，防止视频暂停或结束时继续无效调用
绘制后做图像处理（如灰度、滤镜）
绘制成画布后，就能用 getImageData() 拿到像素级原始数据，进行任意计算和修改。
- 调用
ctx.getImageData(0, 0, width, height)获取ImageData对象，其.data是Uint8ClampedArray，每 4 个值代表一个像素的 RGBA - 遍历
data数组（步长为 4），按需修改 R/G/B 值，比如灰度公式：gray = 0.3*r + 0.59*g + 0.11*b - 改完后必须调用
ctx.putImageData(imageData, 0, 0)才能让修改生效并显示在画布上 - 大量像素运算会阻塞主线程，如需高性能，可考虑 Web Workers 拆分计算，或用
createImageBitmap提升解码效率
提取单帧为图片（截图/封面生成）
如果不需要连续处理，只是想从视频中截取某时刻的一帧，流程更轻量：
- 创建
video元素，设src为视频 URL（本地文件可用URL.createObjectURL(file)） - 设置
video.currentTime = 2.5（跳转到第 2.5 秒），然后监听loadeddata或seeked事件确保定位完成 - 创建 canvas，用
drawImage绘制该帧，再调用canvas.toBlob(callback, 'image/jpeg', 0.9)导出为 JPEG 文件 - 导出的 Blob 可直接生成 URL 显示为
<img>，或触发下载
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
