javascript - 用javascript标记图像并保存

Question

我正在尝试向图像添加标记。用户将能够添加文本、绘图和图像。我猜在前端使用 javascript 最容易做到这一点。我的问题是，保存最终图像的最简单方法是什么。图像也可以用javascript保存。我需要序列化图像并将其保存在后端吗？是否有任何好的库可以帮助解决这些问题，它们似乎很常见。

我知道这是开放式的，但是任何关于使用 javascript 处理图像并将它们保存到后端（在这种情况下为 java）的帮助都会非常有帮助。

Answer 1

您可以在 HTML5 画布中加载图像并使用 javascript 在其上绘制。用户完成后，您可以使用画布的 toDataURL() 方法获取图像的 bit64 编码版本，您可以随意发送或保存。在您的示例中，您可以将 64 位编码字符串发送到 web 服务或 api 以保存它。

考虑这个 html

<canvas id="myCanvas">
</canvas>

然后使用这个javascript来处理它：

//vanilla js, I advise to use a library like Kineticjs
//paint some things:
var can = document.getElementById("myCanvas");
var ctx = can.getContext("2d");
//after the painting is done get the image
var bit64ImageString = can.toDataURL();

如果要将图像保存在服务器上，请使用 Ajax 调用并将 bit64ImageString 发送到服务器。从那时起，您可以随心所欲地使用它:)