如何在JavaScript中按指定尺寸缩放裁剪图片且避免变形？

我来帮你搞定这个图片缩放裁剪的问题！核心思路是先匹配源图和目标图的宽高比例，裁剪掉多余的部分（宽的裁左右，高的裁上下），再把裁剪后的区域缩放填充到目标尺寸，这样既能避免变形，还能居中保留最多内容。

步骤拆解 #

1. 计算宽高比：分别算出源图和目标图的宽高比例，判断需要裁剪的方向。
2. 确定裁剪区域：根据比例差异，计算出需要保留的源图区域（默认居中裁剪，视觉上能保留核心内容）。
3. 调用drawImage完成绘制：用裁剪后的源区域，精准缩放填充到目标canvas中。

完整实现代码 #

function resizeAndCropImage(image, desiredWidth, desiredHeight) {
  // 创建目标canvas
  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');
  canvas.width = desiredWidth;
  canvas.height = desiredHeight;

  // 计算源图和目标图的宽高比
  const srcRatio = image.width / image.height;
  const destRatio = desiredWidth / desiredHeight;

  // 初始化裁剪区域参数（默认全图）
  let sx = 0;
  let sy = 0;
  let srcWidth = image.width;
  let srcHeight = image.height;

  // 根据比例差异计算裁剪区域
  if (srcRatio > destRatio) {
    // 源图比目标图宽，裁剪左右两侧
    srcWidth = image.height * destRatio; // 保留的宽度 = 源图高度 × 目标比例
    sx = (image.width - srcWidth) / 2; // 居中裁剪，起始x坐标
  } else if (srcRatio < destRatio) {
    // 源图比目标图高，裁剪上下两侧
    srcHeight = image.width / destRatio; // 保留的高度 = 源图宽度 ÷ 目标比例
    sy = (image.height - srcHeight) / 2; // 居中裁剪，起始y坐标
  }

  // 绘制裁剪并缩放后的图片
  ctx.drawImage(
    image,
    sx, sy, srcWidth, srcHeight, // 源图中要裁剪的区域
    0, 0, desiredWidth, desiredHeight // 目标canvas的填充区域
  );

  return canvas;
}

为什么你的原有代码会变形？ #

你之前手动调整wdx的方式没有基于比例匹配来计算裁剪区域，导致裁剪后的源图比例和目标图不一致，缩放后自然会变形。而上面的方案先把源图裁剪成和目标比例完全相同的区域，再进行等比例缩放，就从根源上避免了变形问题。

你可以直接调用这个函数，传入你的源图片和目标宽高，就能得到不变形的裁剪缩放图啦！

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