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

Posted 2023-02-25

【中文标题】通过拖放组合（合并）图像

【英文标题】：Combine (merge) images with drag & drop

【发布时间】：2011-12-15 20:05:29

【问题描述】：

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

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

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

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

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

【参考方案1】：

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

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

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

【参考方案2】：

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

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

【讨论】：

您好，感谢您的回复。我确实读过关于 imagecopymerge （忘了提）。我担心的是它使用reactangle的坐标合并，所以无法弄清楚如何用圆圈制作它。你有什么想法吗？

另外，正如 Damen 所提到的，您需要使用 javascript 以便用户可以相对于框架定位图像（这会将 x、y 和比例值传递给可以使用 GD 进行处理的服务器。

您的输出图像是什么格式？如果它将是 jpg，那么只需让您的框架在可见框架之外具有白色填充。如果您希望最终产品在框架和图像之外是透明的，那么您只需在合并后按照以下说明进行操作：***.com/questions/4512477/…

【参考方案3】：

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