我正在为大型html截取屏幕截图,但每次尝试拍摄图像时输出图像都会出现大的空白区域。
我做了很多测试,并说明在load
事件之后渲染了帧,所以我不会在捕获的图像中得到它。
这是显示性能的图像
显示load
事件的红线以及该行之后的帧。
我试图阅读该软件包的所有文档,但我是一名土木工程师,对编程知之甚少,我尽我所能,找不到解决方案。
page.goto
中有4个选项,它们无法解决问题,这里是文档的网址。
https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md#pagegotourl-options
这是我的代码
const puppeteer = require('puppeteer');
(async () => {
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto('D:\Image_2.HTML', {waitUntil: 'load'});
function sleep(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
}
console.log(page.frames())
await page.screenshot({path: 'example.png',fullPage : true});
await browser.close();
})();
答案 0 :(得分:2)
我用另一个包解决了它,问题在于写入图像而不是渲染。所以我将大图分割了4个季度。
/* Dependencies */
const chromeLauncher = require('lighthouse/chrome-launcher/chrome-launcher');
const CDP = require('chrome-remote-interface');
const fs = require('fs');
/** ARGUMENTS AND CONFIGUIRATION
* expects arguments to be
* -w int (width)
* -h int (height)
* -p int (port)
* --url string (url)
*/
const argv = require('minimist')(process.argv.slice(2));
const windowWidth = argv.w ? argv.w : 1024;
const windowHeight = argv.h ? argv.h : 1024;
const filename = argv.filename;
const filename2 = argv.filename2;
const filename3 = argv.filename3;
const filename4 = argv.filename4;
headless=true
const launchConfig = {
chromeFlags: [
`--window-size=${windowWidth},${windowHeight}`,
'--disable-gpu',
headless ? '--headless' : ''
]
}
//function sleep(ms) {
// return new Promise(resolve => setTimeout(resolve, ms));
//}
function saveScreenshot(imageData, pageURL) {
fs.writeFile(
filename,
imageData.data, {encoding:'base64'},
(err)=>{
console.warn('error', "1");
}
);
}
function saveScreenshot2(imageData, pageURL) {
fs.writeFile(
filename2,
imageData.data, {encoding:'base64'},
(err)=>{
console.warn('error', "2");
}
);
}
function saveScreenshot3(imageData, pageURL) {
fs.writeFile(
filename3,
imageData.data, {encoding:'base64'},
(err)=>{
console.warn('error', "3");
}
);
}
function saveScreenshot4(imageData, pageURL) {
fs.writeFile(
filename4,
imageData.data, {encoding:'base64'},
(err)=>{
console.warn('error', "4");
}
);
}
async function launchChrome(headless = true) {
return await chromeLauncher.launch(launchConfig);
}
async function saveScreenShotFromURL(pageURL) {
const chrome = await launchChrome();
const protocol = await CDP({port: chrome.port});
const {Page, Runtime} = protocol;
await Promise.all([Page.enable(), Runtime.enable()]);
Page.navigate({url: pageURL});
Page.loadEventFired(async () => {
const screenshot = await Page.captureScreenshot({clip : {x:0,y:0,width : 3100,height : 3030,scale : 1}});
const screenshot2 =await Page.captureScreenshot({clip : {x:0,y:3030,width : 3100,height : 3030,scale : 1}});
const screenshot3 =await Page.captureScreenshot({clip : {x:3100,y:0,width : 3100,height : 3030,scale : 1}});
const screenshot4 = await Page.captureScreenshot({clip : {x:3100,y:3030,width : 3100,height : 3030,scale : 1}});
Promise.resolve( screenshot).then((imageData)=>{
saveScreenshot(imageData,pageURL);
});
Promise.resolve( screenshot2).then((imageData)=>{
saveScreenshot2(imageData,pageURL);
});
Promise.resolve( screenshot3).then((imageData)=>{
saveScreenshot3(imageData,pageURL);
});
Promise.resolve( screenshot4).then((imageData)=>{
saveScreenshot4(imageData,pageURL);
});
protocol.close();
chrome.kill();
});
}
saveScreenShotFromURL(argv.url)
如果您知道如何async
同时打印4张图片,请帮助我。
答案 1 :(得分:0)
您发布的脚本定义了sleep
函数,但没有调用它。
如果您等待足够的时间,您将使页面达到所需的状态。
注意:您可以使用
await page.waitFor()
方法“睡眠”。
const puppeteer = require('puppeteer');
(async () => {
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto('D:\Image_2.HTML', {waitUntil: 'load'});
// wait for 2 seconds
await page.waitFor(2000);
await page.screenshot({path: 'example.png',fullPage : true});
await browser.close();
})();
一般来说,“当我的页面加载时”问题没有一个好的答案。 waitUntil
中提供的page.goto
选项只是常见的启发式方法,在多种情况下可能会失败。
很难说你的案子出了什么问题;通常需要了解网页内部工作以确定其所需的加载状态。