konvajs 序列化包含图像的阶段

Question

我正在使用 Konvajs 创建自定义标签制作器，在我尝试将舞台序列化为 JSON 之前，一切都运行良好。

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

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

中

JSON 字符串： {"attrs":{"width":500,"height":667,"id":"label-maker"},"className":"Stage","children":[{"attrs":{},"className":"Layer","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":"Text"}]}]}

我正在使用 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 ! ");
         }
    });
 }

Answer 1

默认情况下 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;
});

konvajs 序列化包含图像的阶段

konvajs serialize stage containing images

konvajs