CODEWITHSUNDEEP
google-chrome-devtoolspuppeteergoogle-chrome-headless
drmrbrewer
drmrbrewer

Reputation: 13019

Rotated viewport in puppeteer

I'm trying to mimic a rotated viewport using puppeteer (headless Chrome). What I mean by that is I want the output to be rendered rotated by a certain amount (typically 90 degrees).

The code I'm using at present is:

const puppeteer = require('puppeteer');
var myExpressRoute = function (req, res, next) {
    (async () => {
        const browser = await puppeteer.launch();
        const page = await browser.newPage();
        page.setViewport({width: 500, height: 350});
        await page.goto('https://example.com');
        var screenshotBuffer = await page.screenshot();
        res.header('Content-Type', 'image/png');
        res.send(screenshotBuffer);
        await browser.close();
    })();
};

The screenshot generated is:

enter image description here

But I would like it to be generated like so:

enter image description here

Yes it is possible to use another library to rotate the output from puppeteer, but is there a way of doing this natively within puppeteer, to avoid having to perform a separate rotation?

Failing that, what is best tool for passing screenshotBuffer through a rotation operation before sending to res (one that doesn't require saving to an image file and rotating that image file)?

Upvotes: 3

Views: 1251

Answers (1)

Grant Miller
Grant Miller

Reputation: 29037

You can use the rotate() CSS function in conjunction with page.evaluate() to rotate the screen before taking a screenshot:

Original Screenshot:

/**
 * Original Screenshot
 */

await page.setViewport({
  width: 500,
  height: 350,
});

await page.screenshot({
  path: 'original-screenshot.png',
});

Rotated Screenshot:

/**
 * Rotated Screenshot
 */

await page.setViewport({
  width: 350,
  height: 500,
});

await page.evaluate(() => {
  document.body.style.transform = 'rotate(-90deg)';
});

await page.screenshot({
  path: 'rotated-screenshot.png',
});

Upvotes: 3

Related Questions