How to insert html into generated image using php?

Question

PHP

Hello! There was a task to make generation of a postcard. There are several templates with html text, there are places in the text where you can insert different emoticons (pictures), then a background image is selected on which this text with emoticons will lie, and in the end a full-fledged postcard (picture) is given. The question is - how can you overlay the entire html text, given the emoticons in it? The problem is that if you do this through the usual generation of pictures, it turns out that you need to generate a picture for each smiley, then position them, and it takes a very long time. There is also such a crutch method as, for example, to create a pdf file from the entire html, and take a ready-made image from it. Is there another way to solve this problem?
To make it clear what I wrote, here is an example, by which I want to create. Everything is identical there.

Answer 1

We take phantomjs, write the following file:

// render.js
var webPage = require('webpage');
var page = webPage.create();

page.viewportSize = {
    width: 1920,
    height: 1080
};

page.open('http://toster.com', function (status) {
  var base64 = page.renderBase64('PNG');
  console.log(base64);
  phantom.exit();
});

then from php we call <?= exec("phantomjs render.js") ?> and get the base64 images from the site.

Answer 2

I would add the picture to a variable and echo in the right place