konvajs 序列化包含图像的阶段

我正在使用 Konvajs 创建一个自定义标签制作器，一切都运行良好，直到我尝试将阶段序列化为 JSON。

用户通过三个步骤创建自定义标签。第一步，他们从我们的库中选择一个具有遮罩区域的模板图像。第二步允许他们上传个性化图像，该图像放置在第一步加载的图像后面。有一些外部控件允许用户缩放和移动图像，以便在遮罩区域中渲染图像。第三步允许他们添加文本。

我希望用户能够将他们的标签保存到他们的库中，以便他们可以再次使用它，但能够修改这三个步骤中的任何一个。这意味着我需要将阶段序列化为 JSON 字符串，但图像属性未保存在 JSON 中。

JSON 字符串： {"attrs":{"width":500,"height":667,"id":"label-maker"},"className":"舞台","children":[{"attrs":{}, "className":"层","children":[{"attrs":{"name":"template"},"className":"Image"}]},{"attrs":{},"className":"Layer","children":[{"attrs":{"x":160,"y":41.5,"text":"[在此处输入名称]","fontSize":30,"fontFamily":"Calibri","fill":"#555","name":"textundefined","align":"center","draggable":true,"offsetX ":114.22119140625},"className":"文本"}]}]}

我正在使用 Konvajs toJSON() 来序列化我的舞台。

function save() {
     var json = stage.toJSON();
     var dataURL = stage.toDataURL('image/png');
     //alert(json);
     $.ajax({
         type: "POST",
         url: "label-maker/image-handler.php?action=save",
         data: {jsonFileText: json, image: dataURL},
         error: function (request, error) {
             console.log(arguments);
             alert(" Can't do because: " + error);
         },
         success: function () {
             alert(" Done ! ");
         }
    });
 }

默认情况下Konva不将有关图像源的信息保存到 JSON。所以你必须手动执行此操作。

当你创建时Konva.Image您可以将其来源保存为属性：

// path is url or base64 string from user's input
imageNode.setAttr('src', path);

然后在反序列化时，您可以从源加载图像数据：

const stage = Konva.Node.create(json, 'container');
stage.find('Image').forEach((imageNode) => {
    const src = imageNode.getAttr('src');
    const image = new Image();
    image.onload = () => {
        imageNode.image(image);
        imageNode.getLayer().batchDraw();
    }
    image.src = src;
});