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

Question

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

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

这是我的框架。

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

Answer 1

您可以使用JavaScript和merge-image包轻松地将图像组合在一起。

带有以下图像：

• /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

好吧，这更多是关于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**

Answer 3

该线程中已经有一些出色的客户端方法，但是如果您要在服务器端进行操作， 那么流行的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);