将织物 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 渲染为目标 Canvas。