使用javascript标记图像并保存

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

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

来源

2013-04-05 Lumpy

你在找Java还是Javascript？我已经重新标记了.. – 2013-04-05 14:23:21

我在问这两个问题。我想要一种方法来保存在javascript中所做的更改为java – Lumpy 2013-04-05 14:31:38

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

这是我自己做了一个例子：http://yoerivandamme.com/html5/demos/licenseplate.html

注我使用KineticJS在这个例子中，但你可以实现与香草的javascript同样的事情。

我正在使用JavaScript绘制牌照，我正在根据用户输入添加文本。您可以轻松加载图像，而不是手动绘制图像。

其他例如：http://www.briffett.net/squirrel/

认为这个网站

<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发送到服务器。从这一点上，你可以做任何你想要的:)

来源

2013-04-05 14:27:14 Yoeri

我想松鼠的例子与我的问题最相似。你如何从javascript输入并保存可由服务器保存的图像？ – Lumpy 2013-04-05 14:39:35

我会用一段代码更新我的答案;） – Yoeri 2013-04-08 07:52:59

使用javascript标记图像并保存

回答

相关问题