How add a image (frame) in other image using laravel

Question

I am wanting to add a frame to an image using Laravel. Example, I have two images, one image is the png frame, and the other is the original image.

I need to put the two together to form an image with a frame.

This is my frame.

My goal is that I can put a frame on any image.

Answer 1

You can easily compose images together using JavaScript with merge-image package.

With the following images:

• /body.png

• /eyes.png

• /mouth.png

You can do:

import mergeImages from 'merge-images';

mergeImages(['/body.png', '/eyes.png', '/mouth.png'])
  .then(b64 => document.querySelector('img').src = b64);
  // data:image/png;base64,iVBORw0KGgoAA...

And that would update the img element to show this image:

Answer 2

Well this is more about the css and html question BTW you can do this in border-image property in css here the example 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

There are some excellent client-side approaches already in this thread, but if you want to do this server-side, the popular Intervention Image package is handy and designed to work with Laravel.

You'll have to do some resizing math if your images vary in size, but fundamentally you want the insert method to overlay one over the other.

// 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);