将图像与拖动和合并相结合（合并）下降

Question

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

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

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

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

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

Answer 1

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

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

Answer 2

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

Answer 3

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

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

当然，这里有很多细节需要处理，但确切知道计划是什么应该可以帮助你开始。