如何用纯JS在Canvas中按300px高度等比缩放绘制图片？解决image.width为0问题

核心原因是你在图片未完全加载完成时就读取了它的尺寸，哪怕你以为是“加载后”操作，实际代码的执行时机还是早于图片加载完成的时间点。

最简单的解决方法是把所有依赖图片尺寸的逻辑（设置Canvas尺寸、绘制缩放图）都放到图片的onload回调函数里，确保图片加载完成后再执行：

// 创建图片实例
const memeImg = new Image();
// 若图片是跨域资源，需添加这行（前提是服务器允许跨域）
// memeImg.crossOrigin = 'anonymous';
memeImg.src = '你的表情包图片路径';

// 图片加载完成后执行的逻辑
memeImg.onload = function() {
  // 固定目标高度，计算等比例缩放后的宽度
  const targetHeight = 300;
  const scaleRatio = targetHeight / this.height;
  const targetWidth = this.width * scaleRatio;

  // 获取Canvas元素并设置尺寸
  const canvas = document.getElementById('memeCanvas');
  canvas.width = targetWidth;
  canvas.height = targetHeight;

  // 绘制缩放后的图片到Canvas
  const ctx = canvas.getContext('2d');
  ctx.drawImage(this, 0, 0, targetWidth, targetHeight);
};

额外注意事项 #

• 不要在设置src后立刻执行尺寸读取或绘制操作，必须等待onload事件触发
• 如果图片来自外部域名，需要确保服务器配置了CORS允许跨域访问，同时给图片设置crossOrigin属性，否则图片可能无法正常加载或读取尺寸

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