google-chrome-devtools - puppeteer 中的旋转视口(viewport)

Question

我正在尝试使用 puppeteer 模拟旋转视口(viewport)( headless Chrome)。我的意思是我希望输出旋转一定量(通常为 90 度)。

我目前使用的代码是:

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();
    })();
};

生成的截图是:

---

---

但我希望它像这样生成:

---

---

是的，可以使用另一个库来旋转 puppeteer 的输出，但是有没有一种方法可以在 puppeteer 中本地执行此操作，以避免必须执行单独的旋转？

否则，在发送到 res 之前通过旋转操作传递 screenshotBuffer 的最佳工具是什么(不需要保存到图像文件并旋转它的工具)图片文件)？

Answer 1

您可以使用 rotate() CSS 函数结合page.evaluate()在截图之前旋转屏幕:

原始截图:

/**
 * Original Screenshot
 */

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

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

旋转屏幕截图:

/**
 * 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',
});