HTML 5個畫布，編輯和保存現有圖像

Question

作爲中超新HTML 5個畫布，我需要能夠加載圖像，然後能夠得出，即在圖像上「打個」和保存。

香港專業教育學院纔剛剛開始，能做到這一點 http://www.w3schools.com/html5/canvas_drawimage.asp

因此多數民衆贊成罰款加載圖像我只是現在需要允許用戶點擊圖像的部分創建點，然後才能夠拯救他們。任何好的鏈接或例子？

Answer 1

歌劇有一個很好的教程在畫布上讓用戶「漆」：http://dev.opera.com/articles/view/html5-canvas-painting/

Answer 2

爲圓點的圖形編輯有IMO三個主要選項：

1. 負荷的圖像畫布和真正改變畫布
2. 加載圖像在img並將其用作背景，其中有一個透明畫布，您可以在其中繪製點
3. 不要觸摸t他形象和不使用畫布，但讓每個點單獨img標籤，簡單地生活在像

的頂端爲發送你可能不希望在修改後的圖像發送的結果，只是所選的點配置，這是對服務器的正常ajax請求。也可以發送png格式的修改後的圖像（甚至可以在計算機上本地「下載」它，而不向服務器發送任何內容），但在這種情況下，IMO不是有用的功能。

Answer 3

不完全一樣，但你可以實現這一點。我可以給你一個開頭 - 結帳這jsFiddle。我使用FabricJS構建了這個編輯器。保存功能也在NoteEditor.js中給出

var canvas = new fabric.Canvas('c'); 
var imgInstance = new fabric.Image(imgElement); 
canvas.add(imgInstance);//initialize the Canvas with the image