如何使用 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 { 

  border: 10px solid transparent;

  padding: 15px;

  -webkit-border-image: url(border.png) 30 round; /* Safari 3.1-5 */

  -o-border-image: url(border.png) 30 round; /* Opera 11-12.1 */

  border-image: url(border.png) 30 round;

}

**Result**