javascript 为什么 puppet 师不截图整个元素？

fdbelqdn 于 2023-03-06 发布在 Java

关注(0)|答案(1)|浏览(128)

我试着截取一个svg元素的屏幕截图，但是我只得到了一部分图片。我做错了什么？

'use strict';

const puppeteer = require('puppeteer');

(async () => {
       const browser = await puppeteer.launch();

       try {
           const page = await browser.newPage();
           await page.goto('https://jisho.org/search/%E5%AE%B6%20%23kanji');

           const selector = '#result_area > div > div:nth-child(2) > div.small-12.large-10.columns > div > div > div > svg';
           await page.waitForSelector(selector);
           const element = await page.$(selector); 

           await element.screenshot({
               path: 'example.png',            
           });
       } catch (e) {
           console.log(e)
       } finally {
           await browser.close();
       }
})();

JavaScript

来源：https://stackoverflow.com/questions/73654629/why-puppeteer-doesnt-screenshot-the-whole-element

1条答案

按热度按时间

kcugc4gi1#

如果是我的话，我会直接保存SVG而不是转换成PNG，这样可以保留可伸缩性和原始数据，而不会降低质量，并且您以后可以随时转换成PNG。
但是如果您真的只想要PNG，并且想要纯粹的Puppeteer解决方案，那么问题是overflow-x: hidden CSS位于SVG的父容器上，并且整个页面布局使得截屏非常繁琐。
因此，我只需要去掉所有的页面HTML，除了您感兴趣的一个元素。这使得它更容易捕获。

const puppeteer = require("puppeteer"); // ^19.7.2

let browser;
(async () => {
  browser = await puppeteer.launch({headless: true});
  const [page] = await browser.pages();
  const url = "https://jisho.org/search/%E5%AE%B6%20%23kanji";
  await page.goto(url, {waitUntil: "domcontentloaded"});
  const sel = ".stroke_order_diagram--outer_container svg";
  const el = await page.waitForSelector(sel);
  const svg = await el.evaluateHandle(el => {
    document.body.innerHTML = el.outerHTML;
    return document.querySelector("svg");
  });
  await svg.screenshot({path: "example.png"});
})()
  .catch(err => console.error(err))
  .finally(() => browser?.close());

赞(0）回复(0）举报 2023-03-06

我来回答

javascript 为什么 puppet 师不截图整个元素？

1条答案

相关问题

热门标签

最新问答