How to overlay a PNG image onto another image and dynamically position it using PHP or JavaScript?

[tayllana]

Hello GitHub community,

I'm working on a project where I need to overlay a PNG image on top of another background image and dynamically position the PNG within the background image. My goal is to replicate the functionality offered by Canva (https://www.canva.com/), where I can add an image as a background, place a PNG over it, and then position the PNG wherever necessary before saving the resulting new image.

I'm seeking guidance on how I can achieve this overlaying and positioning process using PHP or JavaScript in my own project. Is there a specific library or approach I can use to accomplish this goal?

Any suggestions, code examples, or resources would be greatly appreciated. Thank you in advance for your help!

[CopperEagle]

Hey there @tayllana

For those with little time

The merge-images javascript library seems to have been written with litteraly this as its single purpose. It's easy to use. The README.md has examples you can pretty much copy-paste and edit as you like. If you need more image manipulation capabilities during your project, check out these resources.

For those who are interested

I was gonna mention the HTML5 based solution using the canvas. This would use the canvas.drawImage function to draw the image and toDataURL to download the image.

TL;DR: This is pain in the ***. The download part has a catch: CORS causes your browser to distrust your own images used to draw on the canvas. The only way you can sidestep is to set up a local webserver. To access you local files. It's all in the name of security, and I am not complaining. But ain't noone will consider that an elegant solution. Not for this specific case anyways.

Cheers

[iqnite]

If your goal is to have a main overlay image and a background image, you can use the background-image CSS property on the div element the image is in.

[CopperEagle]

Though how would you save the endresult as a single image to disk?