Установить ширину и высоту скриншота элемента в Puppeteer - PullRequest
Новая
       28

Установить ширину и высоту скриншота элемента в Puppeteer

0 голосов
/ 30 сентября 2018

Если у меня есть этот код: 

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?

Ответы [ 2 ]

0 голосов
/ 30 мая 2019

У меня есть лучшее решение, использующее html2canvas спереди:

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

или использование его с кукловодом и 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);

fullкод здесь: https://github.com/davidtorroija/screenshot-of-div-e2e/blob/master/README.md

это лучше, потому что легко сделать скриншот огромного div, и не нужно прокручивать, и вы не потеряете какую-либо часть div

0 голосов
/ 01 октября 2018

Вы можете использовать clip параметр elementHandle.screenshot() в сочетании с 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),
  },
});
...