使用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標記圖像並保存

回答

相關問題