通过拖放合并（合并）图像

Question

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

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

然后用户可以移动他的图片（拖动&拖放样式），以便他可以通过“空白洞”选择它的哪个区域是可见的。 然后我想保存结果 - 合并2张照片或将用户图片的位置保存在分贝中，以便稍后再显示。
（类似于this或多或少）

我应该寻找什么样的技术？我猜javascript（为拖动&下降）或HTML5或PHP（用于合并照片）？
有没有我可以使用的任何图书馆？

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

Answer 1

我不知道是否有更好的解决方案（我怀疑有），但我怀疑所有这些都可以用不太麻烦来完成。这里有一个方法破败来解决这个问题：

1. 使用JavaScript供电“上传控件”，如uploadify，使您的用户上载“他的”映像连接到服务器。服务器将对图像执行一些处理（例如，调整大小并裁剪到合适的尺寸）并使用例如PHP的gd library。它会将“准备好的”图像的URL返回给浏览器 - 所有这些都通过AJAX进行。
2. 然后浏览器有一个URL到用户的图像，所以使用更多的Javascript，你可以动态地添加一个元素，将其显示在页面内部，并允许用户用它移动它。 jQuery draggable。将静态内容背后的可拖动图像（具有“洞”的图像）合成为一个细节，您将不得不使用HTML，CSS和Javascript的组合。
3. 用户完成后，使用AJAX调用（例如again jQuery）通知服务器图像的位置（这可通过您选择的Javascipt框架的设施来使用）。然后，服务器可以将这两个图像“拼凑”在一起（gd或其他相同的东西），并返回浏览器一个可以访问最终产品的URL。

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

Answer 2

查看PHP GD扩展。如果安装了它，将图片（透明中心）合并到用户上传的第二张图片上会非常容易。

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

Answer 3

好吧，让你开始，是使用JavaScript阻力和图像的配售路模块。您可以记录相对于容器的x/y坐标。使用PHP图像库/类进行图像合并。这样的事情：http://www.phpclasses.org/package/3930-PHP-Generate-an-image-from-the-combination-of-2-images.html