HTML Canvas：保存图形元素以供其他用户稍后修改
我想面对一个我在互联网上找不到解决方案的问题。这是：我需要将WEB用户在画布空间上绘制的元素保存为单独的而不是平面图像。这是为了让同一用户，甚至其他用户，可以立即修改每个元素（拖放、擦除、部分擦除等）。这也应该有助于最终保存绘图历史并在下一个工作会话中恢复它。我找到的所有示例都是为了保存画布平面图像。
更新：
为了更好地澄清：没有必要作为层，但我确信我想实现几种不同的驱动工具；绘图元素是工具的单一应用/状态：一个圆、一个框、一个添加的图像、一条直线，甚至是从单击鼠标右键直到释放为止的手绘图。然后有机会保存元素状态，允许在下一时刻修改每个元素。
I would like to face a problem for which I haven't seen a solution looking around in Internet. This is: I need to save the elements drawn by WEB users on a canvas space not as a flat image, but each one singularly. This in order to let the same user, or even other users, to modify every single element (drag-and-drop, erase, erase partially, ecc.) in a second moment. This should also help to eventually save a drawing history and restore it in next working sessions. All the examples I found were intended to save just a canvas flat image.
Update:
To better clarify: not necessary as layers, but for sure I thought to realize several different driving tools; a drawing element is the singular application/istance of a tool: a circle, a box, a added image, a straight line or even a free hand drawing that start from the moment of right button mouse click till it is released. Then the chance to save the elements state allowing to modify each one in a second moment.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
您无法使用画布本机执行此操作。您应该考虑使用第三方库。 Fabric 是一个专为执行您想要的操作而构建的库。
You can't do this natively with canvas. You should look at using a third party library. Fabric is a library that was built to do what you want.
基本思想是使用 convan 作为矢量形状（三角形、正方形、圆形等）、手动绘制图形的容器（参见示例 http://www.williammalone.com/articles/create-html5-canvas-javascript- Drawing-app/) 和插入的图像使用户有机会保存/上传内容，而不是作为序列化图像，而是以原始格式保存每个独特的元素，以便在未来的工作会话中继续处理它们。
The base idea was to use convans as a container for vectorial shapes (triangles, squares, cirlces, etc.), manual drawn figures (see example http://www.williammalone.com/articles/create-html5-canvas-javascript-drawing-app/) and inserted images giving the chance to users to save/upload the content not as serialized image, but with each distinguished element in its original format in order to continue to work on them in a future work session.