將Fabric JS畫布數據復制到另一個畫布

Question

有沒有辦法將Fabric JS畫布數據復制到具有Fabric JS的所有功能的另一個Fabric JS畫布

 ctx.drawImage(sourceCanvas, x, y, width, height);

此功能僅復制圖像，而不復制第一個畫布的數據或功能。

Answer 1

1.使用fabric.Object.clone()

    var _clipboard;
    canvasOne.getActiveObject().clone(function(cloned) {
        _clipboard = cloned;
    });
    canvasTwo.add(_clipboard.clone());

請參閱http://fabricjs.com/copypaste上的詳細示例

2.序列化/反序列化

    var objectConstructor = object.constructor;
    var json = object.toObject();
    var objectCopy = objectConstructor.fromObject(json);

對於fabric.Image ：

    var objectCopy = new objectConstructor();
    objectCopy.setOptions(json);
    objectCopy.setSrc(objectCopy.getSrc());

Answer 2

只需將源Canvas轉換為JSON，然后將該JSON渲染為Destination Canvas。