将图像与拖动和合并相结合(合并)下降

时间:2011-12-15 20:05:30

标签: php javascript html html5

想象一下这个场景: 我的服务器本地有一张图片,其中显示草图,并且上面有一个“空洞”区域 然后,用户可以将另一张图片上传到我的服务器。

我想要实现的是: 图像上传完成后,将显示第一张图像(带有“孔”的图像),并在其后面显示用户的照片,以便您可以通过第一张照片的“空白孔”区域看到它。

然后用户可以移动他的照片(拖放式),这样他就可以通过“空洞”选择可见的区域。 然后我想保存结果 - 通过合并2张照片或将用户图片的位置保存在数据库中,以便我可以在以后再次显示。
(或多或少类似this

我应该寻找什么样的技术?我猜javascript(用于拖放)或html5或php(用于合并照片)?
我可以使用任何库吗?

我希望我的解释不会太乱,我甚至不知道如何谷歌。

3 个答案:

答案 0 :(得分:1)

看一下PHP GD扩展。如果已安装,则可以很容易地将图像(具有透明中心)合并到用户将上载的第二个图像之上。

查看http://php.net/manual/en/function.imagecopymerge.php

答案 1 :(得分:1)

好的开始使用,是的,使用JavaScript拖放模块放置图像。您可以记录相对于容器的x / y坐标。将图像与PHP图像库/类合并。这样的事情:http://www.phpclasses.org/package/3930-PHP-Generate-an-image-from-the-combination-of-2-images.html

答案 2 :(得分:1)

我不知道是否有更好的解决方案(我怀疑有),但我怀疑所有这一切都可以做到并没有太多麻烦。以下是解决问题的一种方法:

  1. 使用基于JavaScript的“上传窗口小部件”(例如uploadify),让您的用户可以将“他的”图片上传到服务器。服务器将对图像进行一些处理(例如,调整大小并裁剪到合适的尺寸)并使用例如保存它来保存它。 PHP的gd library。它会将“准备好的”图像的URL返回给浏览器 - 所有这一切都通过AJAX。
  2. 浏览器然后有一个指向用户图像的URL,因此使用更多Javascript,您可以动态添加一个在页面内显示它的元素,并允许用户移动它,例如jQuery draggable。合并静态内容背后的可拖动图像(带有“洞”的图像)是一个细节,您需要使用HTML,CSS和Javascript的组合来处理。
  3. 当用户完成后,使用AJAX调用(例如again jQuery)通知服务器图像的位置(这将通过您选择的Javascipt框架的功能提供)。然后,服务器可以将两个图像“组合”在一起(gd或类似的东西再一次),并返回一个URL,通过该URL可以访问最终产品。
  4. 当然,这里有很多细节需要处理,但确切知道计划是什么应该可以帮助你开始。