Question

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

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

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

JSON字符串： {＆＃34; ATTRS＆＃34; {＆＃34;宽度＆＃34; 500＆＃34;高度＆＃34;：667，＆＃34; ID＆＃34;：＆＃34;标签制造商＆＃ 34;}＆＃34;的className＆＃34;：＆＃34;阶段＆＃34;＆＃34;的子＆＃34;：[{＆＃34; ATTRS＆＃34;：{}，＆＃34;的className＆＃34;：＆＃34;层＆＃34;＆＃34;的子＆＃34;：的 [{＆＃34; ATTRS＆＃34; {＆＃34;名称＆＃34;：＆＃34;模板＆＃34;}＆＃34;的className＆＃34;：＆＃34;图像＆＃34;}] }，{＆＃34; ATTRS＆＃34;：{}，＆＃34;的className＆＃ 34;：＆＃34;层＆＃34;＆＃34;的子＆＃34;：[{＆＃34; ATTRS＆＃34; {＆＃34; X＆＃34;：160，＆＃34; Y＆＃ 34;：41.5，＆＃34;文字＆＃34;：＆＃34; [在此输入姓名]＆＃34;，＆＃34; fontSize＆＃34;：30，＆＃34; fontFamily＆＃34;：＆＃ 34;宋体＆＃34;＆＃34;填充＆＃34;：＆＃34;＃555＆＃34;＆＃34;名称＆＃34;：＆＃34; textundefined＆＃34;＆＃34;对准＆＃ 34;：＆＃34;中心＆＃34;＆＃34;可拖动＆＃34;：真，＆＃34; OFFSETX＆＃34;：114.22119140625}＆＃34;的className＆＃34;：＆＃34;文本＆＃ 34;}]}]}

我使用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序列化包含图像的阶段

1 个答案: