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

希望有用