javascript - 用javascript标记图像并保存

标签 javascript image-manipulation frontend

我正在尝试为图像添加标记。用户将能够添加文本、绘图和图像。我猜在前端使用 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/

相关文章:

javascript onsubmit 重定向失败

javascript - 删除 Mobile Safari 移动版通知 Aframe

python - 如何操纵跟踪器区域使其变为正方形?

c# - C#中的图像处理

javascript - 从复选框中选择选中的值

ruby-on-rails - ASP MVC3 与 Ruby on Rails

javascript - 如何在 asp.net 中更改鼠标悬停时的标签文本

javascript - 如何将参数传递给类扩展组件

jquery - 使用 jQuery 获取图像的 'true size' 而不删除该类

jquery - CSS3 焦点动画