How can I make a dynamic image overlay like this using PHP or node.js?

How can I use PHP or node.js to add an overlay and dynamic text for cover images?

The frosted/blurred overlay background is dynamically generated using either PHP, or node.js image manipulation. The dynamic text on top of that is the easy part for me.

It appears the blurred background of the overlay is a zoomed version of the image on the right side.

I start with a base cover image. I can do the text and everything else, but it's the blurred transparent overlay background that I have issues understanding how they did it. the skewed/angle and frosted/blur to be specific.

any ideas how this was made using php or node.js?

Comments

[Owl Burger]

Yes exactly.
since chatgpt doesn't have eyeballs it's difficult to get help with the exact layout.

But I don't want anyone breaking their back to help with this.

The issue I have is creating the angled overlay shape with transparency/frost using only code, then applying it over my base image.

I guess I'll see if anyone on sharp.js github issues can give some insight on this.

Thank you both for taking the time to reply.

[Rain]

Maybe is better with sharp but I have make a base for that in php GD:

`header("Content-type: image/png");
$link = "w3schools.com/html/pic_trulli.jpg";
$img = imagecreatefromjpeg($link);
list($img_width, $img_height, $attr, $ex) = getimagesize($link);

$transparency = imagecolorallocatealpha($img, 0, 0, 0, 30);
$white = imagecolorallocate($img, 255, 255, 255);

$red = imagecolorallocate($img, 255, 0, 0);
imagefill($img, 0, 0, $white);

$points = [
$img_width/2+100, 0,
$img_width/2, $img_height,
0,$img_height,
0, 0
];

imagefilledpolygon($img, $points, count($points)/2, $transparency);
imagepng($img);`

[Rain]

The question is wrong. You have to use html and CSS because this is a "graphical" thing. Php or nodejs are used to develop logic, not graphics.

For black overlay you have a lot of possibility. You can use directly a blurred image with the trasparent angle. Or you can use CSS and build a container (2 div for example, 1 for zoomed image and 1 for blur and dark overlap).

For angle you can see this answer:
stackoverflow.com/questions/294103...

For blur:
developer.mozilla.org/en-US/docs/W...

Now in Italy are 1.27 am so I can't share the exact code. Maybe tomorrow I can write the fully solution but I suggest you to study html and CSS.

[Owl Burger]

Actually it's done using server side code. this is done using nodes image processing libraries like sharp.js or jimp. It could also be done using the php GD extension.

I already know html and CSS and I know the only way this could be done on the front-end is with custom canvas JavaScript code and saved to server-side via ajax.

the goal is to take the image and text from my SQL database and automate the process of generating a static image like above.

[Rain]

Ok but... Why? You can do it easily with html and CSS with image from filesystem. It's better for responsivity too. It's really a bad choice to use db for a similar static image. Have you particular requirements ? Do you want save the image with text too? (It's bad for localizations)... Just for the images is possibile I think to use pho GD, I will try today

[Rain]

yesterday was late and I did not quite understand the question. if it's about the ability to create the corner and blur that way in my opinion you can place some sort of watermark. as said in the previous answer I will try today

[Accreditly]

This is possible in PHP GD. You can use imagefilter to apply a gaussian blur.

Rough steps to recreate:

• Resize image to 200% on both axis
• Rotate x deg clockwise... looks about 7 degrees, ish?
• Apply imagefilter($image, IMG_FILTER_GAUSSIAN_BLUR);. You may want to do this several times to get the effect
• Create a black rectangle, with ~80% opacity (a guess) using imagefilledrectangle() and imagecolorallocatealpha
• Place the items appropriately on the canvas