php - 在透明圆圈上渲染图像并裁剪它

Question

我有一个背景图片： ，

我在其上融合了一个圆圈（或日食）：

使等于圆形的区域在背景图像上变得透明，就像这样： 。

我已经使用 php 和 image magick 来实现这一点

现在，我必须以如下方式将图像插入孔中：

1. 图像渲染在背景之上，因此只有与照片孔相等的图像区域可见。
2. 当我将图像拖动到照片孔中时，图像会进入背景后面的图层，当再次释放时，图像会重新渲染为步骤 1。
3. 我还需要裁剪在步骤 1 中渲染的图像。

如何使用图像魔法在 php 中实现这一点？任何指示或帮助都会非常有用。

要在图层背景下传输图像，可以使用 z-index 完成吗？

Answer 1

将图像裁剪为与圆形相同的尺寸，然后将其放置在背景图像顶部的位置 posX、posY 等处，可以作为一个很好的直接解决方案。

Answer 2

为了实现上述目标，我采用了以下方法：

1. 我将图像放在背景图像后面的 div 中（完全围绕圆圈）。div 隐藏了溢出，所以我可以包含图像。

2. 为了拖动图像，我将背景图像上的鼠标按下事件转移到下面的 div。这可以使用 jQuery 触发器来完成。

3. 现在要裁剪图像，我计算图像的 x,y 偏移量并相应地裁剪高度和宽度，并将数据发送到服务器以裁剪它。

希望这对其他人有帮助。