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

I'm trying to make a custom avatar maker, where my users can drag & drop images to the position they want (clothes etc. I take the image urls from database based on what they own). Then they can save the look as png image to my site (using php). I have no experience on javascript/jquery but I don't think that this can be without them. So I've found amazing code for this from here:

我正在尝试制作一个自定义的头像制作工具,我的用户可以将图像拖放到他们想要的位置(衣服等。我根据他们拥有的内容从数据库中获取图像网址)。然后他们可以将外观保存为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/

But the images are already in the canvas and can't go outside of it, which is bad considering that someone could have 100 pieces of clothing and didn't want to display them all. Also I have to make custom code for each piece, which is also bad because not all users have the same images to drag.

但是这些图像已经在画布中并且不能超出它的范围,考虑到有人可以拥有100件衣服并且不想全部展示它们,这是不好的。此外,我必须为每个部分制作自定义代码,这也很糟糕,因为并非所有用户都有相同的图像可以拖动。

Is there a way to put all images draggable (to the canvas), so I could easily add the image urls from my database as basic html/css? Is it possible that the images would be outside of the canvas first? Or should I create another canvas for the items users don't want?

有没有办法将所有图像拖放到画布上,所以我可以轻松地将我的数据库中的图像网址添加为基本的html / css?是否有可能图像首先出现在画布之外?或者我应该为用户不想要的项目创建另一个画布?

1 个解决方案

#1

the script in the article uses a static image because its goal is only explain how to export a canvas to bitmap : )

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

I have written another small article where I describe how to upload N images from your hard drive into a canvas ( using CreateJS ) so as you can see the process to load dynamic sources is not so hard.

我写了另一篇小文章,其中我描述了如何将N个图像从硬盘上传到画布(使用CreateJS),这样你就可以看到加载动态源的过程并不那么难。

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

Anyway, if you need to load an image into a canvas you can simply use a syntax like this:

无论如何,如果你需要将图像加载到画布中,你可以简单地使用如下语法:

var img = new createjs.Bitmap('http://uri/image.jpg')
img.x = 50;
img.y = 50;
stage.addChild(img)
stage.update();

and if you need to know when an image is completely loaded you should listen for the onload event:

如果您需要知道图像何时完全加载,您应该监听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();
}

hope it's useful

希望它有用

#1