如何将canvas的阶段保存为JSON格式？

Question

在我当前的项目中，我想用 React 和 React-konva 构建类似 Image Editor 的东西。

首先，我渲染了一个带有一些道具和默认可拖动星星的 konva 舞台。

在下一步中，我们可以使用来自 react-konva 的 Image 为我们的舞台设置背景图像。

<Stage width={konvaWidth} height={height - 150} className={classes.canvas} onClick={test}>
        <Layer>
          {image && bg && <Image
            x={0}
            y={0}
            image={bg}
            scaleX={0.35}
            scaleY={0.35}
            ref={node => {
              imageRef = node;
            }}
          />}
          <Text text="Try to drag a star" />
          {[...Array(10)].map((_, i) => (
            <Star
              key={i}
              x={Math.random() * window.innerWidth}
              y={Math.random() * window.innerHeight}
              numPoints={5}
              innerRadius={20}
              outerRadius={40}
              fill="#89b717"
              opacity={0.8}
              draggable
              rotation={Math.random() * 180}
              shadowColor="black"
              shadowBlur={10}
              shadowOpacity={0.6}
              onDragStart={handleDragStart}
              onDragEnd={handleDragEnd}
            />
          ))}
        </Layer>
      </Stage>

下一步，也是最后一步。

我们可以将 konva 阶段保存为 json 格式吗？

Answer 1

Konva API 有 toJSON() 方法。您可以将任何节点（如舞台）转换为 json.

https://konvajs.org/docs/data_and_serialization/Serialize_a_Stage.html

对于更复杂的情况（比如你有图像、滤镜）：https://konvajs.org/docs/data_and_serialization/Best_Practices.html

但是如果您使用的是 React，我不建议使用 Konva 方法来序列化 canvas 渲染。

在你的反应中，你必须有你的应用程序的状态。 In 可以是任何状态库（mobx、redux）或只是 React 的 setState 或 useState 或其他任何东西。通常，该状态很容易序列化为 JSON.

如何将canvas的阶段保存为JSON格式？

How to save stage of canvas in JSON format?

canvas

reactjs

react-canvas

react-konva

konva