Canvas缩放图片无法显示问题求助：100×100缩略图不显示

你的代码问题在于创建了空白的ImageData却没有填充原图的缩放像素：new ImageData(100,100)只是生成了一个100×100的全透明空像素缓冲区，完全没有关联原图的内容，所以调用putImageData后自然看不到任何图像。

最简便的解决方案：直接用drawImage的缩放参数 #

Canvas的drawImage方法本身支持直接缩放绘制，不需要手动处理ImageData，这是最高效的方式：

let canvas = document.getElementById("demoCanvas");
let context = canvas.getContext("2d");

let image = new Image();
image.src = "corgi.png";
image.onload = () => {
  // 绘制原图
  context.drawImage(image, 0, 0);
  
  // 绘制缩放后的100×100图片（参数：图像源、目标X、目标Y、目标宽度、目标高度）
  context.drawImage(image, 500, 0, 100, 100);
};

如果需要手动处理ImageData（比如自定义像素操作） #

如果确实需要获取缩放后的ImageData进行后续处理，可以通过临时Canvas中转：

let canvas = document.getElementById("demoCanvas");
let context = canvas.getContext("2d");

let image = new Image();
image.src = "corgi.png";
image.onload = () => {
  context.drawImage(image, 0, 0);
  
  // 创建临时Canvas用于缩放原图
  const tempCanvas = document.createElement('canvas');
  tempCanvas.width = 100;
  tempCanvas.height = 100;
  const tempCtx = tempCanvas.getContext('2d');
  
  // 将原图缩放到临时Canvas
  tempCtx.drawImage(image, 0, 0, 100, 100);
  
  // 获取缩放后的像素数据并绘制到主Canvas
  const smallImageData = tempCtx.getImageData(0, 0, 100, 100);
  context.putImageData(smallImageData, 500, 0);
};

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