使图像可拖到HTML5画布，将图像从画布中移出
我试图做一个定制的化身制造者，在那里，我的用户可以拖放图像到他们想要的位置(衣服等)，我根据他们拥有的内容从数据库中获取图像urls。然后，他们可以将外观作为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件衣服，而且不想把它们全部展示出来，这是很糟糕的。另外，我还必须为每个片段定制代码，这也是不好的，因为并不是所有的用户都有相同的图像来拖动。
是否有一种方法可以(将所有图像拖放到画布上)，以便我可以轻松地将数据库中的图像urls添加为基本的html/css？是否有可能这些图像会首先出现在画布之外？还是应该为用户不想要的项目创建另一个画布？
回答 1
Stack Overflow用户
发布于 2013-12-22 12:24:07
本文中的脚本使用静态图像，因为它的目标只是解释如何将画布导出到位图：)
我写了另一篇小文章，其中描述了如何将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();
}希望它有用
https://stackoverflow.com/questions/20725314
复制相似问题
腾讯云开发者
