Fabric.js调用toDataURL导出PNG时如何裁剪画布外的对象及部分

问题原因 #

Fabric.js 调用toDataURL()时默认会自动计算画布内所有对象的最小包围盒作为导出范围，而非使用画布本身的可视区域尺寸，因此超出画布边界的对象内容也会被包含在导出结果中。

解决方案 #

方案1：导出时指定裁剪范围（推荐） #

不需要修改画布原有配置，仅在调用toDataURL()时传入画布尺寸对应的裁剪参数即可：

• 无缩放、平移操作的普通场景：

const dataUrl = canvas.toDataURL({
  format: 'png',
  width: canvas.width,
  height: canvas.height,
  left: 0,
  top: 0
});

• 存在画布缩放、平移的场景，需要结合视口变换参数计算裁剪范围：

const viewport = canvas.viewportTransform;
const dataUrl = canvas.toDataURL({
  format: 'png',
  width: canvas.width,
  height: canvas.height,
  left: -viewport[4] / viewport[0],
  top: -viewport[5] / viewport[3],
  zoom: viewport[0]
});

方案2：全局设置画布裁剪区 #

如果需要长期限制画布的渲染/导出范围，可以通过裁剪属性设置：

• Fabric.js 4.x及更早版本使用clipTo：

canvas.clipTo = function(ctx) {
  ctx.rect(0, 0, canvas.width, canvas.height);
};
// 配置后直接调用导出方法即可自动裁剪
const dataUrl = canvas.toDataURL();

• Fabric.js 5.x及之后版本推荐使用clipPath：

// 生成和画布尺寸一致的裁剪矩形
const clipRect = new fabric.Rect({
  left: 0,
  top: 0,
  width: canvas.width,
  height: canvas.height,
  selectable: false,
  evented: false
});
canvas.clipPath = clipRect;
const dataUrl = canvas.toDataURL();
// 无需裁剪时可清空配置
canvas.clipPath = null;

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