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將畫布的一部分複製到另一個畫布

回答

相關問題