Nightmare.js屏幕截图缓冲区长度为0 [英] Nightmare.js screenshot buffer length 0
问题描述
我正在运行一个nightmare.js脚本,我正在尝试在页面上截取多个元素的屏幕截图。
I'm running a nightmare.js script where where I'm trying to take a screenshot of multiple elements on a page.
第一个元素被捕获得很好,但是下面的所有其他元素都以零长度捕获。我正在努力调试这个问题。任何帮助都会非常受欢迎。
The first element is captured just fine, but every other element that is below the fold is captured with a zero length. I am struggling to debug this issue. Any help would be incredibly appreciated.
这个脚本基本上遍历一个页面并选择 all 页面上与选择器匹配的元素。然后,使用 async
它收集响应并返回对象缓冲区。问题是折叠下方的元素没有截屏(缓冲区长度最终为零)。我尝试 wait()
并滚动到元素,但我还没有取得任何成功。
Basically this script walks through a page and selects all the elements on the page that match a selector. Then, using async
it collects the responses and returns a buffer of objects. The issue is that the elements below the fold do not get screenshotted (buffer length ends up at zero). I tried to wait()
and scroll to the element, but I have not had any success as of yet.
import * as Nightmare from 'nightmare'
import * as vo from 'vo'
import * as async from 'async'
import * as fs from 'fs'
const urls:String[] = [
'https://yahoo.com/'
]
Nightmare.action('snap', function(selector:String, done:Function) {
const self = this;
this.evaluate_now(function (selector) {
return Array.from(document.querySelectorAll(selector))
.map((ele:Element) => {
if (ele) {
const rect = ele.getBoundingClientRect()
const r:Function = Math.round
return {
x: r(rect.left),
y: r(rect.top),
width: r(rect.width),
height: r(rect.height)
}
}
})
}, function(err, clips) {
if (err) return done(err)
if (!clips) return done(new Error(`Selector not found`))
let snaps = []
const snap = (clip, cb) => {
self
.scrollTo(clip.y - clip.height, clip.x)
.screenshot(clip, cb)
.run()
}
async.mapSeries(clips.reverse(), snap, (err, res) => {
done(err, res)
})
}, selector)
})
const scrape = (url) => {
const nightmare = Nightmare({
show: true
});
nightmare
.goto(url)
.snap('.navbar')
.end()
.then((buffers:Buffer[]) => {
buffers.forEach((data, index) => {
fs.writeFileSync(`images/navbar-${index}.png`, data)
})
})
}
urls.forEach(scrape)
推荐答案
从不同的流程中尝试它,给出了更好的结果:
方法的不同之处在于:首先滚动到元素然后取其边界然后继续截屏。
Trying it from different flow, gave better results: The difference in approach is: first scroll to element and then take its bounds and then proceed for screenshot.
const Nightmare = require('nightmare');
const fs = require('fs');
const nightmare = Nightmare({
show: true,
openDevTools: false,
gotoTimeout: 45000
});
nightmare.goto('https://www.google.co.in/?#safe=off&q=nightmare')
.wait(1000)
.evaluate(getElements, 'div.g')
.then(() => {
console.log("Calling screenshots: ");
getAllScreenshots(0);
})
.catch(function(err) {
console.log(err);
});
function getAllScreenshots(index) {
console.log("Called with index: ", index)
nightmare.evaluate(function(index) {
const r = Math.round;
if(index >= window.__nightmare.output.length) {
return false;
}
var element = window.__nightmare.output[index];
console.log(index, element.innerHTML);
element.scrollIntoView(false);
var bound = element.getBoundingClientRect();
return {
x: r(bound.left)-10,
y: r(bound.top)-10,
width: r(element.clientWidth)+40,
height: r(element.clientHeight)+10
}
}, index)
.then(function(bound) {
if(!bound) {
return;
}
console.log("Taking screenshot: ", bound);
nightmare.wait(500).screenshot(__dirname + '/images/navbar' + index + '.png', bound)
.then(function() {
console.log("Calling Next of: ", index);
getAllScreenshots(index + 1);
}).catch(function(err) {
console.log(err);
})
})
.catch(function(err) {
console.log(err);
});
}
function getElements(selector) {
var elements = document.querySelectorAll(selector);
window.__nightmare.output = elements;
console.log(elements.length);
}
这篇关于Nightmare.js屏幕截图缓冲区长度为0的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!