我正在尝试为图像添加标记。用户将能够添加文本、绘图和图像。我猜在前端使用 javascript 最容易做到这一点。我的问题是,保存最终图像的最简单方法是什么。图像也可以用javascript保存吗?是否需要将图片序列化后保存在后端?是否有任何好的库可以帮助解决这类问题,它们似乎很常见。
我知道这是开放式的,但任何有关使用 javascript 处理图像并将它们保存到后端(在本例中为 java)的帮助都会非常有帮助。
最佳答案
您可以在 HTML5 canvas 中加载图像并使用 javascript 在其上绘制。 当用户完成后,您可以使用 Canvas 的 toDataURL() 方法获取图像的 bit64 编码版本,您可以随意发送或保存该图像。 在您的示例中,您可以将 64 位编码的字符串发送到网络服务或 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 发送到服务器。从那时起,你可以用它做任何你想做的事:)
关于javascript - 用javascript标记图像并保存,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15836348/