Safari中Canvas drawImage获取视频截图空白问题求助

针对你遇到的Chrome正常、Safari截图空白的问题，核心原因是Safari对视频资源的跨域限制、帧捕获时机的处理和Chrome存在差异，以下是几个可行的修复方案：

1. 配置视频跨域属性 #

Safari对canvas绘制跨域媒体资源的限制更严格，如果视频资源来自不同域名，必须给视频元素添加crossorigin属性，同时确保视频服务器返回正确的跨域响应头。

修改你的视频元素：

<video ref={secondVideo} crossorigin="anonymous" ...></video>

同时确认视频文件所在服务器的响应头包含Access-Control-Allow-Origin: *（或你的站点域名），否则Safari会禁止canvas读取视频帧。

2. 确保视频已加载完成再截图 #

在调用drawImage前，检查视频的readyState，确保视频已经加载到至少当前帧的数据：

修改capturePreview函数：

const capturePreview = useCallback(() => {
  const video = secondVideo.current;
  // 确保视频已加载到可绘制状态
  if (!video || video.readyState < 2) return;

  const canvas = document.createElement('canvas');
  canvas.width = 80;
  canvas.height = 60;
  const ctx = canvas.getContext('2d');

  ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
  setPreviewUrl(canvas.toDataURL());
}, [secondVideo]);

readyState >=2对应HAVE_CURRENT_DATA状态，表示视频已经有至少一帧可以绘制。

3. 使用requestAnimationFrame延迟捕获 #

Safari的视频帧渲染时机可能和Chrome不同，用requestAnimationFrame延迟一帧再绘制，确保视频帧已经渲染到DOM：

const capturePreview = useCallback(() => {
  const video = secondVideo.current;
  if (!video || video.readyState < 2) return;

  requestAnimationFrame(() => {
    const canvas = document.createElement('canvas');
    canvas.width = 80;
    canvas.height = 60;
    const ctx = canvas.getContext('2d');

    ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
    setPreviewUrl(canvas.toDataURL());
  });
}, [secondVideo]);

4. 检查视频暂停状态（可选） #

部分Safari版本在视频播放中捕获帧可能出现问题，可以先暂停视频再截图，之后恢复播放：

const capturePreview = useCallback(() => {
  const video = secondVideo.current;
  if (!video || video.readyState < 2) return;

  const wasPlaying = !video.paused;
  if (wasPlaying) video.pause();

  requestAnimationFrame(() => {
    const canvas = document.createElement('canvas');
    canvas.width = 80;
    canvas.height = 60;
    const ctx = canvas.getContext('2d');

    ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
    setPreviewUrl(canvas.toDataURL());

    if (wasPlaying) video.play();
  });
}, [secondVideo]);

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