web-dev-qa-db-ja.com

Puppeteerで要素のスクリーンショットの幅と高さを設定する

私がこのコードを持っている場合：

const puppeteer = require('puppeteer');

var test = async () => {
  const browser = await puppeteer.launch({args: ["--no-sandbox", "--disable-setuid-sandbox"]});
  const page = await browser.newPage();
  await page.goto('https://community.wikia.com/wiki/Special:WikiActivity');
  let element =  await page.$('#WikiaMainContent');
  await page.setViewport({ width: 800, height: 1000}); // This is ignored
  await element.screenshot({path: "./wiki.png"});
  await browser.close(); 
}

test();

スクリーンショットはビューポートよりも大きくなっています。

スクリーンショットのwidthが800pxでheightが1000pxになるようにするにはどうすればよいですか？

javascriptnode.jsgoogle-chrome-devtoolsscreenshotpuppeteer
4
Jamie Adams

elementHandle.screenshot() のclipオプションを elementHandle.boundingBox() と組み合わせて使用​​すると、widthおよびheight。

以下の例では、要素のスクリーンショットを撮り、現在のビューポートを超えている場合は要素をクリップします。

await page.setViewport({
  width: 800,
  height: 1000,
});

const example = await page.$('#example');
const bounding_box = await example.boundingBox();

await example.screenshot({
  path: 'example.png',
  clip: {
    x: bounding_box.x,
    y: bounding_box.y,
    width: Math.min(bounding_box.width, page.viewport().width),
    height: Math.min(bounding_box.height, page.viewport().height),
  },
});
16
Grant Miller

フロントにhtml2canvasを使用したより良い解決策があります：

https://Gist.github.com/homam/3162383c8b22e7af691085e77cdbb414

または、バックエンドのpuppeteerおよびhtml2canvasで使用します。

const screenshot = await page.evaluate(async () => {
   const canvasElement = await html2canvas($("div")[0], {
        // useCORS: true,
   });

   let image = Canvas2Image.convertToImage(
        canvasElement,
        $(canvasElement).width(),
        $(canvasElement).height(),
        "png"
    );
    console.log(image.src)
    return image.src;
})
var fs = require('fs');
// strip off the data: url prefix to get just the base64-encoded bytes
var data = screenshot.replace(/^data:image\/\w+;base64,/, "");
var buf = new Buffer(data, 'base64');
fs.writeFile(`./screenshots/div-${Date.now()}-.png`, buf);

ここに完全なコード： https://github.com/davidtorroija/screenshot-of-div-e2e/blob/master/README.md

巨大なdivのスクリーンショットを撮るのが簡単で、スクロールする必要がなく、divのどの部分も失うことがないので、これはより良いです

1
deividsito