跟随教程写相同代码却遇Canvas drawImage类型错误求助

这种情况我之前碰过好多次，大概率是第二张图像没有完全加载完成，或者加载失败就被传给drawImage了，咱们一步步来排查：

• 先确保第二张图像加载完成再绘制
  drawImage要求传入的必须是已加载完成的有效图像元素（比如HTMLImageElement）。如果第二张图还在加载中（或者加载失败），直接调用就会抛出这个类型错误。
  你可以封装一个异步加载函数来确保图像就绪：

  async function loadImage(src) {
    return new Promise((resolve, reject) => {
      const img = new Image();
      img.onload = () => resolve(img);
      img.onerror = (err) => reject(`加载失败: ${src}，错误信息：${err}`);
      img.src = src;
    });
  }
  

  然后在绘制前等待所有图像加载完成：

  // 假设你的Canvas上下文是ctx
  async function renderSprites() {
    try {
      const sprite1 = await loadImage('你的第一张图路径');
      const sprite2 = await loadImage('你的第二张图路径');
      
      ctx.drawImage(sprite1, 0, 0);
      ctx.drawImage(sprite2, 100, 0); // 此时第二张图肯定处于可用状态
    } catch (err) {
      console.error(err);
    }
  }
  renderSprites();
  

• 检查第二张图的路径是否正确
  打开控制台定位到SpriteSheet.js第30行，打印你传入drawImage的图像对象的src属性，然后把这个路径复制到浏览器地址栏直接访问，看是否能正常显示图片。如果路径拼写错误、相对路径层级不对，图像会加载失败，此时图像对象的naturalWidth会是0，同样会触发这个错误。

• 排查跨域问题（如果是外部图片）
  如果你加载的是其他域名下的图片，需要给图像对象设置跨域属性，同时确保目标服务器允许跨域访问：

  async function loadImage(src) {
    return new Promise((resolve, reject) => {
      const img = new Image();
      img.crossOrigin = 'anonymous'; // 关键配置
      img.onload = () => resolve(img);
      img.onerror = reject;
      img.src = src;
    });
  }
  

• 检查SpriteSheet.js第30行的参数类型
  在第30行之前加一行console.log(你传入的图像变量)，看看输出的是不是有效的HTMLImageElement对象。如果输出undefined或者其他非图像类型的值，那就是你传递的参数本身就不对，得回头检查变量赋值的逻辑。

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