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

我想将fabricjs画布的一部分复制到另一个画布上。我不确定如果面料具有适合做它的方法（请让我知道是否如此）和之后一些搜索我决定不使用面料来做。但画布已经使用fabricjs创建。 new fabric.Canvas（）。现在，当我尝试使用context.drawImage（）来复制这个画布的一部分时，我得到一个TypeError。我尝试用img替换画布，或者使用不使用面料创建的画布替换画布。所以，我猜测我可能不得不使用织物画布对象有点不同。Fabricjs将画布的一部分复制到另一个画布

来源

2013-02-06 redGREENblue

可以填充使用JSON，SVG或对象表示面料的画布内容。 [本文]（http://fabricjs.com/fabric-intro-part-3/）详细解释了这一点。同样，您可以使用任何这些格式加载Fabric画布。如果您需要跳过原始画布中的任何对象，只需（临时？）在导出之前将其删除。 – kangax

不完全是我想要的。对不起，当我读回我的问题时，我意识到我不够清楚。我需要做的是基本裁剪画布本身（如果有的话，已经绘制了对象）。所以我希望我可以在裁剪后用drawImage（）复制我想保留的画布部分，提供sx，sy，sh等。params并在一个新的画布上绘制它。但是当我将源代码设置为布料画布时，出现错误。 – redGREENblue

那么，你可以通过'canvas.toDataURL（...）'来获取图像，但没有办法指定裁剪区域。然后，您可以将该图像放置在不同的画布上（可能会在之前进行裁剪）。 – kangax

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

 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'));

来源

2013-02-12 13:42:40 coulix

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

回答

相关问题