HTML Canvas：保存图形元素以供其他用户稍后修改

Posted 2023-05-07

【中文标题】HTML Canvas：保存图形元素以供其他用户稍后修改

【英文标题】：HTML Canvas: Saving a graphic element to be modified later by other users

【发布时间】：2011-03-20 12:05:28

【问题描述】：

我想面对一个我在 Internet 上找不到解决方案的问题。这是：我需要将 WEB 用户在画布空间上绘制的元素保存为平面图像，而不是单独保存。这是为了让同一个用户，甚至其他用户，在第二个时刻修改每一个元素（拖放、擦除、部分擦除、ecc.）。这也应该有助于最终保存绘图历史并在下一个工作会话中恢复它。我发现的所有示例都是为了保存一个画布平面图像。

更新：

为了更好地澄清：没有必要作为层，但肯定我想实现几个不同的驱动工具；绘图元素是工具的单一应用/距离：圆、框、添加的图像、直线甚至是从鼠标右键单击开始直到释放的徒手绘图。然后有机会保存元素状态，允许在第二时刻修改每个元素。

【问题讨论】：

喜欢 GIMP/Photoshop 中的图层？

你有很多不同的绘图工具吗？像画笔、铅笔、印章、路径等？绘制的元素在应用程序的逻辑部分中是如何表示的？他们有代表吗？

【参考方案1】：

你不能用画布原生地做到这一点。您应该考虑使用第三方库。 Fabric 是一个专为做你想做的事而构建的库。

【参考方案2】：

基本想法是使用 convans 作为矢量形状（三角形、正方形、圆形等）、手工绘制的图形（参见示例 http://www.williammalone.com/articles/create-html5-canvas -javascript-drawing-app/) 和插入的图像，让用户有机会保存/上传内容，而不是作为序列化图像，而是将每个显着元素以其原始格式保存/上传，以便在未来的工作会话中继续处理它们。