如何使用 Laravel 在其他图像中添加图像（框架）

Question

我想使用 Laravel 向图像添加框架。例如，我有两张图片，一张图片是png框架，另一张是原始图片。

我需要将两者放在一起以形成带有框架的图像。

这是我的框架。

我的目标是我可以在任何图像上放置一个框架。

Answer 1

您可以使用带有合并图像包的JavaScript 轻松地将图像组合在一起。使用以下图像：/body.png/eyes.png/mouth.png你可以做：import mergeImages from 'merge-images';mergeImages(['/body.png', '/eyes.png', '/mouth.png'])  .then(b64 => document.querySelector('img').src = b64);  // data:image/png;base64,iVBORw0KGgoAA...这将更新img元素以显示此图像：

Answer 2

该线程中已经有一些出色的客户端方法，但是如果您想在服务器端执行此操作，流行的 Intervention Image 包非常方便，并且旨在与 Laravel 一起使用。如果您的图像大小不同，您将不得不进行一些调整大小的数学运算，但从根本上说，您希望该insert方法将一个重叠在另一个之上。// create new Intervention Image$img = Image::make('public/foo.jpg');// paste another image$img->insert('public/bar.png');// create a new Image instance for inserting$watermark = Image::make('public/watermark.png');$img->insert($watermark, 'center');// insert watermark at bottom-right corner with 10px offset$img->insert('public/watermark.png', 'bottom-right', 10, 10);

Answer 3

好吧，这更多是关于 css 和 html 问题顺便说一句，您可以在 css 中的 border-image 属性中执行此操作，示例 Html<img src="https://images.unsplash.com/photo-1565013161635-98472edee347?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80" width="50%" id="borderimg1">CSS#borderimg1 {&nbsp;&nbsp; border: 10px solid transparent;&nbsp; padding: 15px;&nbsp; -webkit-border-image: url(border.png) 30 round; /* Safari 3.1-5 */&nbsp; -o-border-image: url(border.png) 30 round; /* Opera 11-12.1 */&nbsp; border-image: url(border.png) 30 round;}**Result**