php - 通过拖放组合(合并)图像

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，通过该 URL 可以访问最终产品。

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