如何在画布上绘制(使用鼠标/触摸）、保存绘制的对象、存储、加载和操作

How to draw on canvas(with mouse/touch), save the drawn object, store it, load and manipulate?

本文关键字：绘制 保存 对象 操作 加载 存储 触摸 鼠标      更新时间：2023-09-26

我想知道是否有任何框架允许我存储画布绘制的对象、加载和操作，或者如果没有，如何进行这样的过程（如果可能的话）。

我的目标是完成以下步骤：

  1. 在移动设备上使用鼠标/触摸在画布上绘制
  2. 以我以后可以操作的方式存储绘制的对象（而不是作为图像文件）（对于存储，我的意思是将其远程保存在任何类型的源上）
  3. 将绘制的对象加载到画布上，并能够对其进行操作（弯曲线条p.ex）

您可以使用base64+localStorage:

var canvas = document.getElementsByTagName('canvas')[0];  
var pngBase64 = canvas.toDataURL();
localStorage.setItem('myCanvasData', pngBase64);
相关文章：