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

【问题标题】：FabricJS - Ability to output (to PNG) a small section of canvas, not entire canvasFabricJS - 能够输出（到 PNG）一小部分画布，而不是整个画布
【发布时间】：2018-11-16 19:23:41
【问题描述】：

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

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

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

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

FabricJS 可以做到这一点吗？

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

canvas.setBackgroundImage(clipingRect);

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

提前致谢。

【问题讨论】：

标签： javascript canvas fabricjs fabricjs2

【解决方案1】：

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

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

【讨论】：

谢谢杜尔加，这真的很有帮助。我正在使用 toBlob 画布导出到 PNG，例如$scope.saveCanvas2PNG = function() { $("#canvas").get(0).toBlob(function(blob){ // "FileSaver.js" saves blob object as image saveAs(blob, "robImage.png"); }); }; "canvas.toDataURL" 如何与 toBlob 交互？我的意思是问我如何在我的 toBlob 代码中包含“canvas.toDataURL”语句？或者我应该说，我什至应该使用 toBlob 吗？ toBlob 现在被取代了吗？
@RobertGodino 检查this

【解决方案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");

};

【讨论】：