Php 使用拖放功能组合（合并）图像；滴

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

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

然后用户可以移动他的图片（拖放样式），这样他就可以选择通过“空白孔”可以看到图片的哪个区域。 然后我想保存结果-通过合并两张照片或将用户照片的位置保留在db中，以便稍后再次显示。
（差不多）

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

---

我希望我的解释不要太混乱，我甚至不知道如何用谷歌搜索它。

看看PHP GD扩展。如果安装了它，很容易将一个图像（带有透明中心）合并到用户将上载的第二个图像之上

---

看一看

看一看PHP GD扩展。如果安装了它，很容易将一个图像（带有透明中心）合并到用户将上载的第二个图像之上

---

查看

确定要开始，请使用JavaScript拖放模块放置图像。您可以记录相对于容器的x/y坐标。使用PHP图像库/类进行图像合并。类似这样的内容：

好的，开始吧，是的，使用JavaScript拖放模块放置图像。您可以记录相对于容器的x/y坐标。使用PHP图像库/类进行图像合并。类似这样的事情：

我不知道是否有更好的解决方案（我怀疑有），但我怀疑所有这些都可以轻松完成。下面是解决问题的一种方法：

使用JavaScript支持的“上传小部件”，例如，允许用户将“他的”图像上传到服务器。服务器将对图像进行一些处理（例如，调整大小并裁剪到合适的尺寸），然后使用PHP等工具保存图像。它会将“准备好的”图像的URL返回到浏览器——所有这些都是通过AJAX实现的

然后，浏览器会有一个指向用户图像的URL，因此使用更多Javascript，您可以动态添加一个元素，在页面中显示该图像，并允许用户使用例如。在静态内容后面合成可拖动的图像（带有“孔”的图像）是一个细节，您必须使用HTML、CSS和Javascript的组合来处理

用户完成后，使用AJAX调用（例如）通知服务器映像的位置（这将通过您选择的Javascipt框架的工具提供）。然后，服务器可以将这两个图像“组合”在一起（gd或类似的东西），并向浏览器返回一个URL，通过该URL可以访问最终产品

---

当然，这里有很多细节需要处理，但确切了解计划应该有助于您开始。

我不知道是否有更好的解决方案（我怀疑有），但我怀疑所有这些都可以轻松完成。下面是解决问题的一种方法：

使用JavaScript支持的“上传小部件”，例如，允许用户将“他的”图像上传到服务器。服务器将对图像进行一些处理（例如，调整大小并裁剪到合适的尺寸），然后使用PHP等工具保存图像。它会将“准备好的”图像的URL返回到浏览器——所有这些都是通过AJAX实现的

然后，浏览器会有一个指向用户图像的URL，因此使用更多Javascript，您可以动态添加一个元素，在页面中显示该图像，并允许用户使用例如。在静态内容后面合成可拖动的图像（带有“孔”的图像）是一个细节，您必须使用HTML、CSS和Javascript的组合来处理

用户完成后，使用AJAX调用（例如）通知服务器映像的位置（这将通过您选择的Javascipt框架的工具提供）。然后，服务器可以将这两个图像“组合”在一起（gd或类似的东西），并向浏览器返回一个URL，通过该URL可以访问最终产品

---

当然，这里有很多细节需要处理，但确切了解计划应该有助于您开始。

您好，谢谢您的回复。我确实读过imagecopymerge（忘了提到）。让我担心的是，它是用Nereagle的坐标进行合并的，所以我不知道如何用圆圈进行合并。你有什么想法吗？另外，正如Damen提到的，你需要使用javascript，这样用户就可以根据帧定位图像（然后将x、y和比例值传递到服务器，在那里您可以使用GD进行处理。您的输出图像将是什么格式？如果它将是jpg，则只需使您的帧在可见帧外具有白色填充。如果您希望最终产品在帧和图像外是透明的，则只需遵循以下步骤即可。）合并后的说明：您好，谢谢您的回复。我确实读过imagecopymerge（忘记提及）.让我担心的是，它是用Reactingle的坐标合并的，所以我不知道如何使用圆圈。你有什么想法吗？另外，正如Damen提到的，你需要使用javascript，这样用户就可以根据帧定位图像（然后将x、y和比例值传递到服务器，您可以在服务器上使用GD进行处理。您将使用什么格式