Question

我使用fabric JS在画布上添加对象，然后以图像的形式保存它。现在我想把图像带回到画布内的编辑模式。

您可以在http://www.13thandmars.com/logo_studio/builder.html?project_id=17b36372c43c04044dd804454dfdf6e8

详细了解相关信息

添加文字会在上面的链接中为tshirt添加一个对象。

Answer 1

您可以将画布保存为JSON，然后可以从JSON

加载它

var myJson = JSON.stringify(canvas.toJSON(['left', 'top', 'lockMovementX', 'lockMovementY']));
canvas.loadFromJSON(myJson, function () {
    //render the canvas
    canvas.renderAll();
});

Answer 2

如果我没弄错，你说字体属性丢失了吗？

如果这是你的问题，请看看，使用canvas.toJSON（）转换画布时，不会将所有对象属性转换为Json，因此当您要返回画布时，对象将无法完成（您的自定义属性将丢失），

例如：myObj.material，myObj.size，myObj.clotheType等。

您必须在原型toObject函数中说明要使用canvas.toJSON（）转换哪些属性，在您的代码中，以下是我的代码片段：

        fabric.Object.prototype.toObject = (function(toObject) {
            return function() {
                return fabric.util.object.extend(toObject.call(this), {
                    objectId: this.objectId,//my custom property
                    _controlsVisibility:this._getControlsVisibility(),//i want to keep controlsVisibility for my reasons
                    typeTable:this.typeTable,//my custom property
                    txtType:this.txtType, //my custom property
                    customOptions:this.customOptions//my custom object property
                });
            };

我希望有所帮助。

将画布保存到包含其所有对象的图像，然后返回到画布，并返回所有对象以进行编辑

2 个答案: