javascript - 使图像可拖动到 HTML5 Canvas，将图像移出 Canvas

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/

但是图像已经在 Canvas 中，无法移出 Canvas ，考虑到有人可能有 100 件衣服并且不想将它们全部显示出来，这很糟糕。另外，我必须为每个部分制作自定义代码，这也很糟糕，因为并非所有用户都可以拖动相同的图像。

有没有办法让所有图像都可拖动(到 Canvas 上)，这样我就可以轻松地将数据库中的图像网址添加为基本 html/css？图像有可能首先出现在 Canvas 之外吗？或者我应该为用户不想要的项目创建另一个 Canvas ？

Answer 1

本文中的脚本使用静态图像，因为它的目标只是解释如何将 Canvas 导出为位图:)

我写了另一篇小文章，其中描述了如何将 N 个图像从硬盘驱动器上传到 Canvas (使用 CreateJS)，以便您可以看到加载动态源的过程并不那么困难。

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

无论如何，如果您需要将图像加载到 Canvas 中，您可以简单地使用如下语法:

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();
}

希望有用