使圖像可拖動到HTML5 Canvas，將圖像移出畫布

Question

我正在嘗試制作一個自定義頭像制作器，我的用戶可以在其中將圖像拖放到他們想要的位置（衣服等。我根據他們擁有的內容從數據庫中獲取圖像URL）。 然后他們可以將外觀保存為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件衣服並且不想全部展示，這是很糟糕的。 另外，我必須為每塊代碼創建自定義代碼，這也很糟糕，因為並非所有用戶都拖動相同的圖像。

有沒有一種方法可以將所有圖像拖放到畫布上，所以我可以輕松地將數據庫中的圖像URL添加為基本的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();
}

希望它有用