制作图像可拖动到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(); 
} 

希望这是有用的