是否有一种方法可以从画布上裁剪设计，而忽略所有的白色/透明空间

Question

我有一个使用fabricJS与600x500的尺寸构建的画布。我在这个画布上添加了一个图像，大小为200x300，下面还有一个文本元素。

$canvasObj.toDataURL(); 

导出整个画布区域，包括画布上围绕设计的空白区域。

是否有一种方法可以在画布上获得设计的裁剪输出，而不是所有的空白?

Answer 1

这可以通过将对象克隆到组，获取组boundingRect，然后将boundingRect参数传递给toDataUrl()函数(参见fiddle)来完成。

。

// make a new group
var myGroup = new fabric.Group();
canvas.add(myGroup);
// ensure originX/Y 'center' is being used, as text uses left/top by default.
myGroup.set({ originX: 'center', originY: 'center' });
// put canvas things in new group
var i = canvas.getObjects().length;
while (i--) {
 var objType = canvas.item(i).get('type');
 if (objType==="image" || objType==="text" || objType==="itext" || objType==="rect") {
  var clone = fabric.util.object.clone(canvas.item(i));
  myGroup.addWithUpdate(clone).setCoords();
  // remove original lone object
  canvas.remove(canvas.item(i));
 }
}
canvas.renderAll();
// get bounding rect for new group
var i = canvas.getObjects().length;
while (i--) {
 var objType = canvas.item(i).get('type');
 if (objType==="group") {
  var br = canvas.item(i).getBoundingRect();
 }
}
fabric.log('cropped png dataURL: ', canvas.toDataURL({
    format: 'png',
    left: br.left,
    top: br.top,
    width: br.width,
    height: br.height
}));

注。我应该提到我没有使用图像类型，所以我只是猜测它被称为'image'.