前端新人别再求后端了：3行代码用Canvas截取视频帧（附避坑实录）

——写给那些被“截个图”支配到怀疑人生的兄弟姐妹

---

老板一句“随便截个封面”，我差点把后端兄弟逼疯

去年冬天，我还只是个刚转正的切图仔，组长甩给我一句：“用户上传完视频，自动给他生成封面，明天上线。”
我当场脑内小剧场：

1. 视频先传服务器
2. Python 调 FFmpeg
3. 存库返 URL
4. 前端美滋滋展示

结果后端老哥听完打了个哈欠：“兄弟，上传进度条还没写完呢，你让我再跑个 FFmpeg？自己用 Canvas 撸一帧得了。”
我：？？？Canvas 还能这么玩？
于是开启了我三天的踩坑之旅——今天把血泪史打包成外卖，热乎着喂给你。

---

为什么非得 Canvas？——因为后端真的够不着

很多场景后端就是无能为力：

• 用户本地上传前就想先看封面
• 直播流（HLS、WebRTC）根本没过你服务器
• 想做“鼠标拖到哪，封面就停在哪”的交互

这些时候，只有浏览器自己能触碰到视频原始数据。Canvas 就是前端手里的“截屏键”，按下去就能抓一张，还不用麻烦运维装 FFmpeg。

一句话：能浏览器干的事，就别给服务器添堵，省下的都是钱。

---

核心原理：把 video 当成“画笔”往 canvas 上糊

MDN 官方一句话总结：

ctx.drawImage(video, 0, 0);

看起来简单到离谱，但魔鬼全在细节里。
画之前你得保证：

1. 视频元数据已加载（知道宽、高）
2. 视频解码到某一帧（黑屏时画出来就是真·黑洞）
3. 没跨域阻拦（否则浏览器直接给你“污染”警告）

下面这段代码是“最小可运行骨架”，三行真男人：

<video id="v" src="demo.mp4" crossorigin="anonymous" muted></video>
<canvas id="c"></canvas>
<script>
  const v = document.getElementById('v');
  const c = document.getElementById('c');
  const ctx = c.getContext('2d');

  v.addEventListener('loadeddata', () => {
    c.width = v.videoWidth;   // 注意！是属性，不是 style.width
    c.height = v.videoHeight;
    ctx.drawImage(v, 0, 0);
    // 此刻 canvas 里已经躺着一帧高清图
  });
</script>

复制粘贴就能跑，但想上生产？继续往下看，坑多着呢。

---

Step by Step：从“能跑”到“能抗并发”

1. 等视频准备好再动手

loadeddata 事件表示“第一帧已解码”，但想追求极致，可以等 canplay 事件，保证后续 seek 也能用。

v.addEventListener('canplay', async () => {
  v.currentTime = 1;  // 拖到 1s 处
  await new Promise(r => v.onseeked = r);
  ctx.drawImage(v, 0, 0);
});

2. 把图搞出来：base64 vs Blob

小图直接 toDataURL 最方便：

const png = c.toDataURL('image/png'); // data:image/png;base64,iVB...
imgPreview.src = png;

但大图（4K）会瞬间占爆内存，此时用 toBlob 更温柔：

c.toBlob(blob => {
  const url = URL.createObjectURL(blob);
  imgPreview.src = url;        // 本地预览
  const a = document.createElement('a');
  a.href = url;
  a.download = 'cover.png';
  a.click();
  URL.revokeObjectURL(url);    // 用完记得释放
}, 'image/png');

3. 封装成 Promise，让业务代码更优雅

function capture(video, mime = 'image/webp', quality = 0.8) {
  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');
  return new Promise((resolve, reject) => {
    if (!video.videoWidth) return reject('video not ready');
    canvas.width = video.videoWidth;
    canvas.height = video.videoHeight;
    ctx.drawImage(video, 0, 0);
    canvas.toBlob(resolve, mime, quality);
  });
}
// 调用
capture(v).then(blob => {
  // 直接上传、预览、插库，想干嘛干嘛
});

---

跨域视频截不了的锅，浏览器不背

如果你把视频扔在 CDN，地址是 https://cdn.xxx.com/a.mp4，前端页面是 https://www.yyy.com，浏览器默认会阻止你读取像素，怕你把人家版权内容偷走。
解法两步走：

1. 视频标签加属性

<video crossorigin="anonymous" src="https://cdn.xxx.com/a.mp4"></video>

2. CDN 响应头返回

Access-Control-Allow-Origin: *

少了任何一步，Canvas 都会被“污染”：toDataURL/toBlob 直接抛 SecurityError。
调试小技巧：

try {
  c.toDataURL();
} catch (e) {
  console.error('兄弟，跨域了', e);
}

---

分辨率陷阱：canvas 的宽高属性 ≠ style 宽高

很多人直接 CSS 里写：

canvas { width: 300px; height: 200px; }

然后发现截出来一张 300×200 的马赛克。
划重点：

• canvas 标签的 width/height 属性才是“画布真实像素”
• CSS 的 width/height 只是“拉伸显示”

正确姿势：

c.width = v.videoWidth;   // 1920
c.height = v.videoHeight; // 1080
// 如果你想前端压缩，再另开一个小 canvas 画缩略图，别委屈原始画布

---

性能翻车现场：高频截图把主线程干爆

需求升级：逐帧做 OCR、做色卡分析、做“视频防抖”……不管啥场景，只要你想 30fps 猛截，主线程立刻教你做人。
保命守则：

1. 用 requestAnimationFrame 代替 setInterval
2. 把耗时后处理（如压缩、上传）丢到下一个事件循环或 Web Worker
3. 用完立即 revokeObjectURL，别让 BlobURL 内存泄漏

示例：

let stop = false;
function loop() {
  if (stop) return;
  ctx.drawImage(v, 0, 0);
  c.toBlob(blob => {
    self.postMessage({ blob, ts: performance.now() });
  }, 'image/webp', 0.6);
  requestAnimationFrame(loop);
}
requestAnimationFrame(loop);
// 在 Web Worker 里再 post 回主线程，页面不卡

---

骚操作合集：截图之外的小惊喜

1. 暂停状态也能画

video 当前是 paused，一样能 drawImage，适合做“鼠标 hover 进度条即时预览封面”功能。

2. 滤镜一起截

给 video 加 CSS 滤镜：

video { filter: blur(4px) grayscale(1); }

Canvas 会忠实地把滤镜效果画进去，不用自己再算像素。

3. 录屏时顺手截帧

const stream = canvas.captureStream(30);
const recorder = new MediaRecorder(stream);
// 同时每 1s 从 video 再画一次 canvas，封面和录屏两不误

4. 大文件上传？先压缩再转 Blob

c.toBlob(
  blob => {
    const fd = new FormData();
    fd.append('cover', blob, 'cover.webp');
    fetch('/upload', { method: 'POST', body: fd });
  },
  'image/webp',
  0.7   // 画质 70%，体积直接砍一半
);

---

完整实战：一个 React Hook 甩过去，产品闭嘴

import { useRef, useState, useEffect } from 'react';

export default function useVideoCover(src: string) {
  const videoRef = useRef<HTMLVideoElement>(null);
  const [cover, setCover] = useState<string>('');

  useEffect(() => {
    if (!src) return;
    const v = document.createElement('video');
    v.src = src;
    v.crossOrigin = 'anonymous';
    v.muted = true;
    v.currentTime = 1;          // 拖到 1s 处
    v.onseeked = () => {
      const canvas = document.createElement('canvas');
      const ctx = canvas.getContext('2d')!;
      canvas.width = v.videoWidth;
      canvas.height = v.videoHeight;
      ctx.drawImage(v, 0, 0);
      canvas.toBlob(blob => {
        setCover(URL.createObjectURL(blob));
      }, 'image/webp', 0.8);
    };
  }, [src]);

  // 组件卸载清理
  useEffect(() => () => {
    cover && URL.revokeObjectURL(cover);
  }, [cover]);

  return cover;
}

// 业务层
function UploadItem({ file }) {
  const preview = useVideoCover(URL.createObjectURL(file));
  return <img src={preview} alt="封面" />;
}

十行代码，封面自动生成，产品还想加“手动微调”？直接再包一层 canvas 画裁切框，一样在前端撸完。

---

常见报错黑话翻译器

控制台原话	人话翻译
Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.	跨域视频没加 crossorigin，浏览器怕你偷图
IndexSizeError: The index is not in the allowed range.	drawImage 时视频宽/高为 0，先检查 readyState
Uncaught RangeError: Maximum call stack size exceeded	toDataURL 太大，内存爆掉，换 toBlob

---

结语：把这三行代码背下来，明天你就敢跟后端拍桌子

canvas.width = video.videoWidth;
canvas.height = video.videoHeight;
ctx.drawImage(video, 0, 0);

再遇到“自动截封面”需求，你微微一笑，打开 VSCode，三分钟交活。
后端兄弟还能省下一台 FFmpeg 机器，年底绩效他请你喝奶茶。

——谨以此文献给每一个被“截个图”支配到深夜的前端新人。
别再求后端了，Canvas 在手，封面我有。