Fabric JS Canvas背景图片尺寸调整问题求助

正确实现方式 #

Fabric.js中无法直接在Canvas初始化时通过backgroundImageWidth这类自定义参数调整背景图尺寸，需先将图片加载为fabric.Image对象，调整其尺寸后再设置为背景：

方法1：加载图片后缩放或设置固定尺寸 #

// 替换为你的图片路径
const imageUrl = "<?php echo $image; ?>";

fabric.Image.fromURL(imageUrl, function(img) {
  // 方式A：按比例缩放（示例为原尺寸的50%）
  img.scale(0.5);
  
  // 方式B：设置固定宽高（如需保持比例需自行计算）
  // img.set({ width: 300, height: 650 });
  
  // 将调整后的图片设为Canvas背景
  const canvas = new fabric.Canvas('canvas');
  canvas.setBackgroundImage(img, canvas.renderAll.bind(canvas));
});

方法2：设置背景时通过配置项适配画布 #

如果需要让背景图适配Canvas尺寸，可在设置背景时计算缩放比例：

const canvas = new fabric.Canvas('canvas');
canvas.setWidth(document.body.scrollWidth / 2.2);
canvas.setHeight(650);

fabric.Image.fromURL("<?php echo $image; ?>", function(img) {
  canvas.setBackgroundImage(img, canvas.renderAll.bind(canvas), {
    // 按比例缩放至铺满画布（类似CSS的cover效果）
    scaleX: canvas.width / img.width,
    scaleY: canvas.height / img.height,
    // 若需保持图片比例，取最大缩放值避免变形：
    // scaleX: Math.max(canvas.width / img.width, canvas.height / img.height),
    // scaleY: Math.max(canvas.width / img.width, canvas.height / img.height)
  });
});

初始方法无效的原因 #

Fabric.js的Canvas初始化参数中并没有backgroundImageWidth、backgroundSize这类内置属性，直接传入自定义参数不会被框架识别，必须通过操作fabric.Image对象的scaleX/scaleY、width/height等属性来调整尺寸。

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