代码之家 › 专栏 › 技术社区 › Robin Savinsky

konvajs序列化包含图像的阶段

konvajs

1

Robin Savinsky · 技术社区 · 7 年前

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

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

JSON字符串: [{“attrs”:{“name”:“template”},“className”:“Image”}] },{“attrs”:{},“className”:“Layer”,“children”:[{“attr”:{“x”:160,“y”:41.5,“text”:“[在此处输入名称]”,“fontSize”:30,“fontfamine”:“Calibri”,“fill”:“#555”,“Name”:“textundefined”,“align”:“center”,“draggable”:true,“offsetX”:114.2219140625},“className”:“text”}]}]}

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 ! ");
         }
    });
 }

1 回复 | 直到 7 年前

1

3

lavrton 7 年前

默认情况下 Konva

创建时 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;
});