FabricJs从URL加载的图片无法拉伸适配Image Object

嘿，这个问题我太熟了！你现在遇到的是Fabric.js里很常见的图片适配问题——你给Image对象设置了900×300的尺寸，但它默认不会自动把方形的哈巴狗图片拉伸/缩放来填满这个框，只会保持图片的原始比例显示。下面给你几个实用的解决方案，按需选就行：

1. 保持图片比例，适配容器（推荐） #

如果你不想让哈巴狗变形，只想让它按比例填满矩形区域（可能上下或左右留空，但不会拉伸扭曲），可以用Fabric提供的scaleToWidth或scaleToHeight方法，先适配容器的宽或高，再调整位置让它居中：

// 假设你的图片对象是dogImage，背景矩形是bgRect
// 先尝试按容器宽度缩放，保持图片原始比例
dogImage.scaleToWidth(bgRect.width);
// 如果缩放后的高度超过了容器高度，就改用按高度缩放
if (dogImage.getScaledHeight() > bgRect.height) {
  dogImage.scaleToHeight(bgRect.height);
}
// 调整图片位置，让它在矩形内部居中
dogImage.set({
  left: bgRect.left + (bgRect.width - dogImage.getScaledWidth()) / 2,
  top: bgRect.top + (bgRect.height - dogImage.getScaledHeight()) / 2
});
// 重新渲染画布
canvas.renderAll();

2. 强制拉伸填充容器（不保留比例） #

如果你不在乎图片变形，只想让它完全填满900×300的矩形区域，可以直接计算缩放比例并应用，或者直接修改图片的宽高：

// 方法一：通过缩放比例适配
const scaleX = bgRect.width / dogImage.width;
const scaleY = bgRect.height / dogImage.height;
dogImage.set({
  scaleX: scaleX,
  scaleY: scaleY,
  left: bgRect.left,
  top: bgRect.top
});
canvas.renderAll();

// 方法二：直接设置宽高（注意：会修改图片的原始尺寸记录）
dogImage.set({
  width: bgRect.width,
  height: bgRect.height,
  left: bgRect.left,
  top: bgRect.top,
  scaleX: 1,
  scaleY: 1
});
canvas.renderAll();

3. 加载图片时直接指定适配规则 #

如果是刚加载图片，你可以在创建Fabric.Image对象的回调里就处理好尺寸，避免后续调整：

fabric.Image.fromURL('你的哈巴狗图片URL', function(img) {
  // 这里选你需要的适配方式，比如按比例居中
  img.scaleToWidth(900);
  if (img.getScaledHeight() > 300) {
    img.scaleToHeight(300);
  }
  img.set({
    left: 50 + (900 - img.getScaledWidth())/2,
    top: 50 + (300 - img.getScaledHeight())/2
  });
  // 或者用强制拉伸的方式
  // img.set({ width: 900, height: 300, left: 50, top: 50, scaleX:1, scaleY:1 });
  
  canvas.add(img);
  canvas.renderAll();
});

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