用javascript标记图像并保存

Question

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

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

Answer 1

您可以在HTML5画布中加载图像，并使用javascript在其上绘制。 用户完成后，您可以使用画布的toDataURL（）方法获取图像的64位编码版本，您可以根据需要发送或保存。 在您的示例中，您可以将64位编码的字符串发送到webservice或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发送到服务器。从那时起，你可以随心所欲地做任何事情：）