使用html2canvas下载裁剪后图片时出现变形问题求助

问题出在html2canvas对object-fit: cover的支持不完善，它无法正确模拟这个CSS属性的裁剪效果，导致图片被强制拉伸到容器尺寸，出现变形。

下面提供两种可行的解决方法：

方法1：手动用Canvas绘制图片（精准模拟object-fit: cover） #

直接绕开html2canvas的局限性，自己创建Canvas并按照object-fit: cover的逻辑绘制图片，再生成下载链接：

function imageDownload() {
  const img = document.getElementById('uploadedImage');
  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');

  // 匹配容器的尺寸
  canvas.width = 191;
  canvas.height = 344;

  // 计算裁剪和绘制的参数
  const imgRatio = img.naturalWidth / img.naturalHeight;
  const containerRatio = canvas.width / canvas.height;

  let drawWidth, drawHeight, offsetX, offsetY;

  if (imgRatio > containerRatio) {
    // 图片宽高比大于容器，按高度缩放，裁剪左右
    drawHeight = canvas.height;
    drawWidth = img.naturalWidth * (canvas.height / img.naturalHeight);
    offsetX = (drawWidth - canvas.width) / 2 * -1;
    offsetY = 0;
  } else {
    // 图片宽高比小于容器，按宽度缩放，裁剪上下
    drawWidth = canvas.width;
    drawHeight = img.naturalHeight * (canvas.width / img.naturalWidth);
    offsetX = 0;
    offsetY = (drawHeight - canvas.height) / 2 * -1;
  }

  // 绘制裁剪后的图片
  ctx.drawImage(img, offsetX, offsetY, drawWidth, drawHeight);

  // 触发下载
  const link = document.createElement('a');
  link.download = 'image.jpg';
  link.href = canvas.toDataURL('image/jpeg', 0.9);
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
}

方法2：用背景图替代img标签的object-fit #

html2canvas对background-size: cover的支持更好，把图片作为容器的背景图来显示，这样html2canvas能正确渲染出裁剪效果：

修改CSS： #

#uploadedImage{
    position: absolute;
    height: 344px;
    width: 191px;
    background-size: cover;
    background-position: center;
    margin-bottom: -50px;
}

修改图片加载逻辑： #

把原来的<img>标签换成<div>，并通过JavaScript设置背景图：

// 假设你获取到上传的图片文件后
const imgUrl = URL.createObjectURL(file);
document.getElementById('uploadedImage').style.backgroundImage = `url(${imgUrl})`;

之后你原来的html2canvas下载代码可以正常使用，不会再出现变形问题。

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