Headless rendering on LAMP server

Hi Helpers,

I am using CI v3.1.6 with php7.4 on ubuntu 20.04 LAMP.
We generate a complex bootstrap modal, and I want to render this modal on my server so that I can use a JS library called html2canvas to create an image of the constructed modal and then write that image to a file on the server.

I have this working currently on the client browser but our images are subject to the device width. By attempting to do the rendering and processing on the server I can maintain a standard width for the image.

I have stumbled across xvfb in my research and wondered how I might integrate this to achieve my goal on our server, thus disconnecting the modal image from the client's device width.

Further I have read it is possible to take a screen shot using xvbf so that might simplify my requirement by doing without the JS lib processing step of the page.

Can anyone point me in the right direction of give me some examples perhaps as this is yet another bit of technology I need to master as soon as possible.

Thanks, Paul

You could do this with Puppeteer (this is a Node library): https://developers.google.com/web/tools/puppeteer

Migrate to ci4
Less then 7 days you are know ci4 completely

Enlightenment  Is  Freedom

Gents I like brevity! I have grown up with unix cli.
But Please expand a bit.

I have installed puppeteer but cannot get any screenshot of the bootstrap modal as yet.

As for migrating to ci4 how exactly will that help?

Appreciate your time but I am staggering around in oceans of code at the moment :-(

PHP Code:

const puppeteer = require('puppeteer');

const filePath = '/path/to/image.jpg';

const run = async _ => {
    const browser = await puppeteer.launch({
        args: [
            '--disable-gpu',
            '--disable-dev-shm-usage',
            '--disable-setuid-sandbox',
            '--no-first-run',
            '--no-sandbox',
            '--no-zygote',
            '--single-process'
        ]
    });

    const page = await browser.newPage();

    await page.goto('http://localhost/', {
        waitUntil: 'domcontentloaded'
    });

    await page.screenshot({ path: filePath, type: 'jpeg', fullPage: false });
});

run(); 


Thanks ojmichael.
I have actually built a similar node script, and have had some partial success. However its not stable yet and I have open queries on the puppeteer github issues list.
I'm still hopeful.