製作圖像可拖動到HTML5畫布，將圖像移出畫布

Question

我正在嘗試製作自定義頭像製作工具，其中我的用戶可以將&拖放到他們想要的位置（服裝等）。我從數據庫中獲取圖像網址基於他們自己的）。然後他們可以將png圖像保存爲我的網站（使用php）。我沒有JavaScript/jQuery的經驗，但我不認爲這可能沒有他們。所以我發現驚人的代碼爲這個從這裏：

http://www.fabiobiondi.com/blog/2012/10/export-and-save-a-screenshot-of-an-html5-canvas-using-php-jquery-and-easeljs/

但圖片已經在畫布上，並不能去外面它，這是壞的考慮，有人可能有100件衣服並不想將它們全部展示出來。此外，我必須爲每件作品製作自定義代碼，這也是不好的，因爲並非所有用戶都有相同的圖片進行拖動。

有沒有辦法將所有圖像拖動（到畫布），所以我可以很容易地從我的數據庫添加圖像網址作爲基本的HTML/CSS？圖像是否可能首先出現在畫布之外？還是應該爲用戶不想要的項目創建另一個畫布？

Answer 1

文章中的腳本使用靜態圖像，因爲它的目標只是說明如何導出畫布上的位圖：）

我還編寫了另一個小文章，我描述瞭如何從您的硬盤驅動器上載的N個圖像到一個畫布（使用CreateJS），所以你可以看到加載動態源的過程並不困難。

http://www.fabiobiondi.com/blog/2012/10/upload-images-from-the-user-hard-driveto-an-html5-canvas-easel-js-application/

無論如何，如果你需要將圖像加載到一個畫布，你可以簡單地使用這樣的語法：

var img = new createjs.Bitmap('http://uri/image.jpg') 
img.x = 50; 
img.y = 50; 
stage.addChild(img) 
stage.update(); 

，如果你需要知道當圖像被完全加載你應該監聽onload事件：

var image = new Image(); 
image.onload = onImageLoaded; 
image.src = "http://uri/image.jpg"; 

function onImageLoaded (event) { 
    var img = new createjs.Bitmap(event.target) 
    img.x = 50; 
    img.y = 50; 
    stage.addChild(img) 
    stage.update(); 
} 

希望這是有用的