Question

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

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

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

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

FabricJS可以实现吗？

我找了一个小提示，告诉你我的意思：http://jsfiddle.net/prabhath/92jy8q52/

canvas.setBackgroundImage(clipingRect);

我的另一个想法是在较大的画布中创建一个较小的画布，但从我在网上看到的，在画布外的区域看不到边界控件。我还没有探索内部/外部画布，但不确定这是否符合我的需求。

提前致谢。

Answer 1

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

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

Answer 2

谢谢@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");

};

FabricJS - 能够输出（到PNG）一小部分画布，而不是整个画布

2 个答案: