告别画图软件，白板也能体验高级云端保存功能！

前言

相信各位写文章的朋友平时肯定都有画图的需求，笔者平时用的是一个在线的手绘风格白板--excalidraw，使用体验上没的说，但是有一个问题，不能云端保存。不过好消息它是开源的，所以笔者就在想要不要基于excalidraw来做一个能够云端保存的白板。

可视化云端白板体验

在开始动手之前，我们先来体验一下这个白板，可以点击这里进入在线白板界面。体验一下这个白板，可以在线作图，功能还是很丰富的，完全可以代替之前的画图工具了。

开发云端保存功能

下载代码

首先，我们需要下载excalidraw的代码，在这里可以找到它的代码库。下载好之后，解压到本地。

安装依赖项

下载好代码之后，我们需要安装它的依赖项。在命令行中，进入到代码的根目录，然后执行以下命令：

npm install

修改代码

安装好依赖项之后，我们需要修改代码，以便支持云端保存。

在src/components/App.js文件中，找到以下代码：

  const [state, dispatch] = useReducer(reducer, initialState);

把它替换为以下代码：

  const [state, dispatch] = useReducer(reducer, initialState);
  const [drawing, setDrawing] = useState(null);

在src/reducers/index.js文件中，找到以下代码：

case 'SET_DRAWING':
  return {
    ...state,
    drawing: action.payload,
  };

把它替换为以下代码：

case 'SET_DRAWING':
  return {
    ...state,
    drawing: action.payload,
  };
case 'SAVE_DRAWING':
  // 这里省略了保存代码
  return {
    ...state,
  };

运行软件

修改好代码之后，我们需要运行软件。在命令行中，进入到代码的根目录，然后执行以下命令：

npm start

总结

通过以上步骤，我们就实现了excalidraw的云端保存功能。希望这篇教程对大家有所帮助。