Question

是否可以使用php＆amp; amp ;;将一个图像放在特定区域的另一个图像上java脚本或任何其他库？图像也可以以特定角度放置吗？

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

运行良好

我看起来像https://placeit.net/#!/stages/ipad-mini-and-iphone-6-mockup-template-of-a-young-man-at-the-garden-a4878

这样的功能

Answer 1

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

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

使用以下CSS：

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

但在你的情况下，这有点困难。我认为最好的方法是将模板图像置于顶部（当然在其中具有一定的透明度），以及由其下方的用户上传的图像。这样，将自动进行裁剪。它会是这样的：

<div class="container">
   <img src="image1.png" alt="" class="ontop" />
   <img src="image2.png" alt="" 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 width和height属性来调整下面的图像大小。您还可以使用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" alt="" class="below" style="top: <?php echo getTopPosition(); ?>px;" />

是否可以在特定的空间中插入图像？

1 个答案: