是否可以在特定空间中将图像插入其他图像？

Posted 2023-02-25

【中文标题】是否可以在特定空间中将图像插入其他图像？

【英文标题】：Is it possible to insert an image over other at a particular in space?

【发布时间】：2015-09-23 09:40:08

【问题描述】：

是否可以使用 php & java 脚本或任何其他库在特定区域将一张图像放在另一张图像上？也可以把图片放在特定的角度吗？

我正在开发一个系统，用户将上传图像，图像将与管理员从管理员端上传的模板合并。但是我被困在图像没有自动以特定角度粘贴在模板上的点上。系统在http://182.71.22.42/srsandroidiphone/step_1.php?id=Ii1DJGAKYAo=运行良好

我正在寻找类似 @​​987654322@ 的功能

【问题讨论】：

是的，你需要使用层（z-index 可以）、浮动和定位值 + 一点点 javascript。祝你好运:)

@Dave 实际上我正在开发像placeit.net/#!/stages/… 这样的功能，用户将输入图像，它将固定在管理员创建的模板上。但我的问题是前端用户必须将图像移动到特定区域，并且用户必须以某些角度旋转图像才能将其固定在模板中。是否有任何系统或框架可以自动执行此操作？

【参考方案1】：

在 CSS 中将一张图片放在另一张图片上非常容易。你可以这样做：

<div class="container">
   <img src="image1.png"  />
   <img src="image2.png"  class="over" />
</div>

使用以下 CSS：

.container  position: relative; 
.container .over  position: absolute; top: 10px; left: 10px; 

但在你的情况下，这有点困难。我认为今天最好的方法是将模板图​​像放在顶部（当然其中有一些透明度），然后将用户上传的图像放在它下面。这样，裁剪将自动进行。会是这样的：

<div class="container">
   <img src="image1.png"  class="ontop" />
   <img src="image2.png"  class="below" />
</div>
.container  position: relative; 
.container .ontop z-index: 2; position: absolute; top: 0px; left: 0px; 
.container .below z-index: 1; position: absolute; top: 10px; left: 10px; 

然后，您可以使用 css 的宽度和高度属性来调整下面的图像大小。您也可以使用 transform 属性来旋转它。

.container  position: relative; 
.container .ontop z-index: 2; position: absolute; top: 0px; left: 0px; 
.container .below z-index: 1; position: absolute; top: 10px; left: 10px; transform: rotate(7deg); width: 100px; height: 50px; 

这将使前端显示。如果您希望用户能够下载最终图像，您应该使用 canvas 或 GD2 php 库。

当然，如果您希望自动生成（我参考您对自己帖子的评论），您可以使用 PHP 设置 CSS 属性值：

<img src="image2.png"  class="below" style="top: <?php echo getTopPosition(); ?>px;" />

【讨论】：

是的，我正在使用画布和 GD 库进行操作。但是偏斜转换没有正确完成。如果模板处于某个角度，则图像无法正确固定。

类似placeit.net/#!/stages/…的功能，只有GD转换