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

我正在尝试使用 puppeteer( headless Chrome)模拟旋转的视口(viewport)。我的意思是我希望输出呈现旋转一定量(通常为 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 中本地执行此操作，以避免必须执行单独的旋转？

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

最佳答案

您可以在截屏前使用 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',
});

关于google-chrome-devtools - puppeteer 中的旋转视口(viewport)，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/47714156/