Canvas drawImage报错：图片路径正确但HTMLImageElement处于broken状态

常见原因分析 #

• 图片未完成加载就执行drawImage：你的preloadImages函数仅创建Image实例并设置src，未等待图片加载完成就将其加入state。此时图片可能仍在加载中或加载失败，导致drawImage调用时处于broken状态。
• 跨域资源限制：若图片存储在其他域名下，且服务器未配置CORS响应头，浏览器会阻止图片加载，即使路径正确，Image对象也会进入broken状态。
• 文件名/路径大小写不匹配：部署环境（如Linux服务器）区分大小写，而本地开发环境（如Windows）不区分，文件名大小写不一致会导致实际请求404，图片加载失败。
• 渲染循环重复启动与泄漏：每次frameIndex或images变化时，原代码会启动新的requestAnimationFrame循环，但旧循环未正确取消，可能导致旧循环尝试使用失效的图片引用。

针对你的代码的修复方案 #

1. 确保图片加载完成后再更新state #

修改preloadImages函数，等待图片加载完成后再存入state，同时处理加载失败场景：

async function preloadImages() {
  const loadedImages = [];
  for (let i = 1; i <= numFrames; i++) {
    const img = new Image();
    // 若图片跨域，需添加此配置（确保服务器已开启CORS）
    // img.crossOrigin = "anonymous";
    const imgSrc = getCurrentFrame(i);
    await new Promise((resolve) => {
      img.onload = () => {
        loadedImages.push(img);
        resolve();
      };
      img.onerror = () => {
        console.error(`图片加载失败: ${imgSrc}`);
        resolve(); // 可根据需求调整失败处理逻辑
      };
      img.src = imgSrc;
    });
  }
  setImages(loadedImages);
}

2. 修复滚动计算逻辑 #

原逻辑中index <= 0的判断会阻止第一帧触发，且index > numFrames的判断多余，优化后：

const handleScroll = () => {
  const scrollFraction = window.scrollY / (scrollHeight - window.innerHeight);
  // 限制滚动比例在0-1区间，避免计算出无效索引
  const clampedFraction = Math.max(0, Math.min(1, scrollFraction));
  const index = Math.floor(clampedFraction * (numFrames - 1));
  setFrameIndex(index);
};

3. 优化渲染循环，避免无效调用 #

在渲染useEffect中，增加图片有效性检查，并确保旧动画帧被正确取消：

useEffect(() => {
  if (!canvasRef.current || images.length < numFrames || frameIndex < 0 || frameIndex >= images.length) {
    return;
  }

  const context = canvasRef.current.getContext("2d");
  let requestId;

  const render = () => {
    const currentImage = images[frameIndex];
    // 检查图片是否加载完成且有效
    if (currentImage.complete && currentImage.naturalWidth !== 0) {
      context.drawImage(currentImage, 0, 0);
    }
    requestId = requestAnimationFrame(render);
  };

  render();

  return () => {
    if (requestId) cancelAnimationFrame(requestId);
  };
}, [frameIndex, images, numFrames]);

4. 排查跨域与文件路径问题 #

• 若图片来自外部域名，确认服务器已配置Access-Control-Allow-Origin响应头，并在Image对象上设置img.crossOrigin = "anonymous"。
• 检查服务器上的图片文件名大小写是否与代码生成的路径完全一致，确认所有图片文件存在于指定目录。

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