Fabricjs将部分画布复制到另一个画布答案

【问题标题】：Fabricjs copy part of canvas to another canvasFabricjs将部分画布复制到另一个画布
【发布时间】：2013-01-22 03:49:21
【问题描述】：

我正在尝试将fabricjs画布的一部分复制到另一个画布。我不确定fabric是否有适合这样做的方法（如果是这种情况，请告诉我），经过一番搜索，我决定不这样做使用织物。但是画布已经使用fabricjs创建了。 新的 fabric.Canvas()。现在，当我尝试使用 context.drawImage() 复制此画布的一部分时，我得到了一个 TypeError。我尝试用 img 或不使用织物创建的画布替换画布，这很有效。所以，我猜我可能不得不以不同的方式使用织物画布对象。

【问题讨论】：

您可以使用 JSON、SVG 或对象表示来填充 Fabric 的画布内容。 This article 详细解释了这一点。同样，您可以使用任何这些格式加载 Fabric 画布。如果您需要跳过原始画布中的任何对象，只需（暂时？）在导出前删除它们。
不是我想要的。对不起，当我读回我的问题时，我意识到我不够清楚。我需要做的是基本上裁剪画布本身（如果有的话，已经在上面绘制了对象）。所以我希望我可以复制我想在裁剪后使用 drawImage() 保留的画布部分，提供 sx、sy、sh 等参数并将其绘制在新的画布上。但是当我将源设置为织物画布时，我得到了错误。
嗯，你可以通过canvas.toDataURL(...) 获取图像，但无法指定裁剪区域。然后，您可以将该图像放置在不同的画布上（可能之前对其进行裁剪）。

标签： javascript html html5-canvas fabricjs

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

【讨论】：