1

我非常感谢有关 FabricJS 的一些反馈和帮助。

我在更大的 600 x 600px 画布中有一个 500 x 500px 像素边界区域（由虚线定义）。

但是，我只想将虚线区域内的小部分输出到 PNG，而不是整个画布。这很重要，因为用户应该能够更改其输出的边界区域大小（例如 Facebook 广告大小 [1200px]、名片大小 [???px] 等），但画布大小将保持不变。

在输出时，我只需要一个较小有界区域的 PNG。

FabricJS可以做到这一点吗？

我已经找到了一个小提琴来告诉你我的意思：http: //jsfiddle.net/prabhath/92jy8q52/

canvas.setBackgroundImage(clipingRect);

我的另一个想法是在更大的画布中创建一个更小的画布，但从我在网上看到的情况来看，边界控件在画布之外的区域不可见。我还没有探索内部/外部画布，但不确定这是否能满足我的需求。

提前致谢。

4

2 回答 2

1 
canvas.toDataURL({
  left: clipingRect.left,
  top: clipingRect.top,
  width: clipingRect.width,
  height: clipingRect.height
});

您可以使用带有选项的canvas.toDataURL()来获取画布的一部分。

于 2018-06-07T08:07:42.203 回答
0

谢谢@Durga，效果很好。

我稍微调整了代码以满足我的需要。这是我的最终功能：

$scope.saveCanvas2ClippedPNG = function(multiplier) {

  var clipdCanvas = canvas.toDataURL({
    multiplier: multiplier,
    format: 'png',
    left: 100,     //clipingRect.left
    top: 100,      //clipingRect.top
    width: 1000,   //clipingRect.width
    height: 428    //clipingRect.height
  });

  var byteString = atob(clipdCanvas.split(',')[1]);
  var mimeString = clipdCanvas.split(',')[0].split(':')[1].split(';')[0]
  var ab = new ArrayBuffer(byteString.length);
  var ia = new Uint8Array(ab);

  for (var i = 0; i < byteString.length; i++) {
    ia[i] = byteString.charCodeAt(i);
  }

  var blob = new Blob([ab], {type: mimeString});

  saveAs(blob, "robClipdImage.png");

};
于 2018-06-07T18:00:42.377 回答