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

希望它有用

使图像可拖动到HTML5 Canvas，将图像移出画布

1 个答案: