Fabricjs将画布的一部分复制到另一个画布上

Question

我正在尝试将fabricjs画布的一部分复制到另一个画布中。我不确定fabric是否有适用于此的方法（如果有，请告诉我），经过一些搜索，我决定不使用fabric进行操作。但是，该画布已经使用fabricjs创建。new fabric.Canvas()。现在，当我尝试使用context.drawImage()复制该画布的一部分时，会出现TypeError错误。我尝试用img或不使用fabric创建的canvas替换canvas，那样可以工作。所以，我猜想我可能需要稍微不同地使用fabric canvas对象。

- redGREENblue

---

您可以使用JSON、SVG或对象表示来填充Fabric的画布内容。这篇文章详细解释了这一点。同样，您可以使用任何这些格式来加载Fabric画布。如果您需要跳过原始画布中的任何对象，只需在导出之前将它们（暂时？）删除即可。 - kangax

不完全是我想要的。抱歉，当我回顾我的问题时，我意识到我表达得不够清楚。我需要做的是基本上裁剪画布本身（如果有任何已经绘制的对象）。所以我希望我可以使用drawImage()复制我想要保留的画布部分，提供sx、sy、sh等参数，并将其绘制在新画布上。但是当我将源设置为fabric画布时，我会收到错误。 - redGREENblue

你可以使用 canvas.toDataURL(...) 来获取图像，但无法指定裁剪区域。然后，您可以在另一个画布上定位该图像（可能在裁剪之前）。 - kangax

Answer 1

如果您想从画布中复制一个矩形区域以将其导出为图像，则可以使用以下方法：

      canvas.deactivateAll();
      canvas.renderAll();
      var ctx = canvas.getContext("2d");
      var myImageData = ctx.getImageData(box.x, box.y, box.w, box.h);
      var buffer = document.createElement('canvas');
      var bufferCtx = buffer.getContext("2d");
      buffer.width = box.w;
      buffer.height = box.h;
      bufferCtx.putImageData(myImageData, 0, 0);
      window.open(buffer.toDataURL('image/png'));

- coulix