jjzjj

javascript - 每个 DOM Node 的屏幕截图

coder 2024-07-18 原文

如何为任何站点中的每个 DOM Node 创建屏幕截图？

我尝试使用 headless 浏览器 (puppeteer)，只有当我知道某些元素的 XPath 或选择器时它才能工作。 但是如何接收所有元素的 XPath 或选择器？

async function screenshotDOMElement(opts = {}) {
const padding = 'padding' in opts ? opts.padding : 0;
const path = 'path' in opts ? opts.path : null;
const selector = opts.selector;

if (!selector)
    throw Error('Please provide a selector.');

const rect = await page.evaluate(selector => {
    const element =
     document.evaluate(selector, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;
    if (!element)
        return null;
    const {x, y, width, height} = element.getBoundingClientRect();
    console.log (x,y,width,height)
    return {left: x, top: y, width, height, id: element.id};
}, selector);

if (!rect)
    throw Error(`Could not find element that matches selector: ${selector}.`);

return await page.screenshot({
    path,
    clip: {
        x: rect.left - padding,
        y: rect.top - padding,
        width: rect.width + padding * 2,
        height: rect.height + padding * 2
    }
});
}

我还尝试使用 HtmlAgilityPack (C#) 并通过 XPath 枚举 HtmlDocument 中的每个 Node ，但此 XPath 无法与 puppeteer

一起使用

我需要使用 puppeteer，因为它是 XPath 或 Selector 截图任务的最佳工具

谁能帮帮我？

最佳答案

使用 puppeteer，你不需要再使用整个页面截图，因为它有 elementHandle.screenshot([options]) .您可以执行以下操作:

const browser = await puppeteer.launch();

const page = await browser.newPage();
await page.goto('https://example.com');

// get a list of all elements - same as document.querySelectorAll('*')
const elements = await page.$$('*')

for (let i = 0; i < elements.length; i++) {
  try {
    // get screenshot of a particular element
    await elements[i].screenshot({path: `${i}.png`})
  } catch(e) {
    // if element is 'not visible', spit out error and continue
    console.log(`couldnt take screenshot of element with index: ${i}. cause: `,  e)
  }
}
await browser.close();

请注意，对于某些不可见或被其他元素覆盖等的元素，puppeteer 无法获取屏幕截图。在这种情况下，您需要捕获错误并继续。

关于javascript - 每个 DOM Node 的屏幕截图，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53252584/

javascriptNodeselectorsectionelementnode.jsweb

有关javascript - 每个 DOM Node 的屏幕截图的更多相关文章

  1. 屏幕录制为什么没声音？检查这2项，轻松解决 - 2

    相信很多人在录制视频的时候都会遇到各种各样的问题，比如录制的视频没有声音。屏幕录制为什么没声音？今天小编就和大家分享一下如何录制音画同步视频的具体操作方法。如果你有录制的视频没有声音，你可以试试这个方法。 一、检查是否打开电脑系统声音相信很多小伙伴在录制视频后会发现录制的视频没有声音，屏幕录制为什么没声音？如果当时没有打开音频录制，则录制好的视频是没有声音的。因此，建议在录制前进行检查。屏幕上没有声音，很可能是因为你的电脑系统的声音被禁止了。您只需打开电脑系统的声音，即可录制音频和图画同步视频。操作方法：步骤1：点击电脑屏幕右下侧的“小喇叭”图案，在上方的选项中，选择“声音”。 步骤2：在“声

  2. ruby - 将n维数组的每个元素乘以Ruby中的数字 - 2

    在Ruby中，是否有一种简单的方法可以将n维数组中的每个元素乘以一个数字？这样:[1,2,3,4,5].multiplied_by2==[2,4,6,8,10]和[[1,2,3],[1,2,3]].multiplied_by2==[[2,4,6],[2,4,6]]？(很明显，我编写了multiplied_by函数以区别于*，它似乎连接了数组的多个副本，不幸的是这不是我需要的)。谢谢! 最佳答案 它的长格式等价物是:[1,2,3,4,5].collect{|n|n*2}其实并没有那么复杂。你总是可以使你的multiply_by方法:c

  3. ruby-on-rails - 使用 javascript 更改数据方法不会更改 ajax 调用用户的什么方法？ - 2

    我遇到了一个非常奇怪的问题，我很难解决。在我看来，我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时，我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性，其中包括href和data-method。再次单击此链接后，我的服务器收到了对新href的请求，但使用的是旧的data-method，即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是，如果我刷新页面，HTML与"new"HTML相同(随返回的JS发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的

  4. ruby - 每个页面上的 Jekyll 分页 - 2

    据我们所知，Jekyll默认分页仅支持index.html，我想创建blog.html并在那里包含分页。有什么解决办法吗？ 最佳答案 如果您创建一个名为/blog的目录并在其中放置一个index.html文件，那么您可以向_config.yml表示paginate_path:"blog/page:num"。不是使用根文件夹中的默认index.html作为分页器模板，而是使用/blog/index.html。分页器将根据需要生成类似/blog/page2/和/blog/page3/的页面。这将使您到达yourwebsite.com/b

  5. ruby - `gem install` 多个 gem 的语法是什么，为每个 gem 指定版本？ - 2

    如何使用geminstall同时安装多个gem，同时指定我想要的版本？例子:geminstallakami-v1.2.0--ignore-dependenciesgeminstallatomic-v1.1.14--ignore-dependenciesgeminstallaws-s3-v0.6.2--ignore-dependenciesgeminstallbackports-v3.3.0--ignore-dependenciesgeminstallbrendanlim-sms-fu-v1.0.0--ignore-dependenciesgeminstallbuilder-v3.1.3

  6. ruby-on-rails - 未定义的方法每个 rails 错误 - 2

    我正在通过位于http://ruby.railstutorial.org的教程在Rails上试用ruby.我已经到了可以创建用户并将他们的姓名和头像显示在以下位置的地步:http://localhost:3000/users/1现在我想在用户访问时显示所有用户:http://localhost:3000/users/这是我的Controller:classUsersController这是我的看法。#Viewforindexactioninuser'scontroleerAllusers我收到以下错误。undefinedmethod`each'fornil:NilClass谁能告诉我为

  7. ruby - 在 Mechanize 中使用 JavaScript 单击链接 - 2

    我有这个:AccountSummary我想单击该链接，但在使用link_to时出现错误。我试过:bot.click(page.link_with(:href=>/menu_home/))bot.click(page.link_with(:class=>'top_level_active'))bot.click(page.link_with(:href=>/AccountSummary/))我得到的错误是:NoMethodError:nil:NilClass的未定义方法“[]” 最佳答案 那是一个javascript链接。Mechan

  8. ruby-on-rails - 每个 Ruby 未定义的方法 - 2

    破败。一个人可以有很多出价，这个人只有一个出价。在我的索引操作中，我有@bids=Bid.find_by_person_id(params[:person_id])在我看来是的我得到NoMethodError:undefinedmethodeach'for#在访问人员出价的索引View时。这是因为这个人只有一个出价吗？我觉得不是这样，但除此之外我很茫然.. 最佳答案 find_by返回第一项。我想你在找Bid.where(person_id:params[:person_id]) 关于r

  9. ruby - 在 Ruby 中添加到数组中的每个元素 - 2

    有没有办法在数组的每个元素前加上一些东西。例如:file=File.new(my_file,'r')header=IO.readlines(my_file)[1]#headerlookslike[1,2,3]#Prependeachelelementofheaderwithfilename,somethinglikeheader.prepend(filename+".")#headerlookslike[filename.1,filename.2,filename.3] 最佳答案 您想使用map:["foo","bar","baz"

  10. 电脑怎么截图？进来看（8种常用截图方法） - 2

    电脑上可以截取图片吗？如果可以，该如何操作呢？相信很多小伙伴都只知道一两种截图的方式，知道的并不全面。其实，电脑上有多种方式截图的，而且非常方便。电脑怎么截图？今天我们就来教大家如何使用电脑截取图片的8种常用方式！操作环境：演示机型：Delloptiplex7050系统版本：Windows10方法一：系统自带截图具体操作：同时按下电脑的自带截图键【Windows+shift+S】，可以选择其中一种方式来截取图片：截屏有矩形截屏、任意形状截屏、窗口截屏和全屏截图。 方法二：QQ截图具体操作：在电脑登录QQ，然后同时按下【Ctrl+Alt+A】，可以任意截图你需要的界面，可以把截图的页面直接下载，

随机推荐