- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
假设我有 URL 列表或 SVG 文件的完整路径,现在我想为每个 URL 逐一截取屏幕截图。
这是测试代码,我用来一张一张截图,但它没有按预期工作!
这段代码只是为所有 URL 启动一次 headless chrome 页面实例,node.js 会抛出此错误
(node:3412) MaxListenersExceededWarning: Possible EventEmitter memory leak detected. 11 lifecycleevent listeners added. Use emitter.setMaxListeners() to increase limit
但我想一张一张地截图。
'use strict';
const fs = require('fs');
const glob = require('glob');
const validUrl = require("valid-url")
const puppeteer = require('puppeteer');
const devices = require('puppeteer/DeviceDescriptors');
const iPhone = devices['iPhone 6'];
/**
* Loading Application Config
*/
const inputUrl = 'http://www.google.com';
/**
* Using Puppeteer.js
*/
console.log('-- Trying to Launch Puppeteer');
const browser = puppeteer.launch({
headless: true
}).then(function(browserObj)
{
console.log('-- Trying to Open New Page');
browserObj.newPage().then(function(pageObj)
{
async function closeHeadlesssChrome(browserObj) {
console.log('-- Trying to Close Chome Headless Window');
await browserObj.close();
}
async function setChromeViewport(pageObj) {
console.log('-- Trying to Update page viewPort');
await pageObj.setViewport({
width: 1366,
height: 738,
deviceScaleFactor: 1,
isMobile: false,
hasTouch: false,
isLandscape: false
});
}
var takeScreenshot = async function(pageObj, srcUrl) {
console.log('-- Trying to Load Web Page ' + srcUrl);
await pageObj.goto(srcUrl);
console.log('-- Trying to Take Screenshot');
await pageObj.screenshot({
path: srcUrl + '.png',
clip: {
x: 0,
y: 0,
width: 795,
height: 1125
}
})
}
// Input or Source Url
const inputUrl = "C:/Users/ssp/Music/BR PUBLIC INTER COLLEGE";
var matchedFiles = [];
// Check if given Url/Path exists
if (fs.existsSync(inputUrl))
{
const inputUrlObj = fs.statSync(inputUrl);
if (inputUrlObj.isDirectory())
{
matchedFiles = glob.GlobSync(inputUrl + '/**/*.svg').found;
}
else if (inputUrlObj.isFile())
{
matchedFiles.push(inputUrl );
}
}
else
{
console.log('-- Input Url not exists')
return closeHeadlesssChrome(browserObj);
}
setChromeViewport(pageObj);
matchedFiles.map(function(srcUrl){
takeScreenshot(pageObj, srcUrl);
});
});
});
谢谢
最佳答案
使用 for..of
和 async-await
而不是 .map
。 .map
不会暂停执行,但 await
会暂停。
browserObj.newPage().then(async function(pageObj) { // <-- turn the main function into async function
// ... many lines later
for(let srcUrl of matchedFiles){
await takeScreenshot(pageObj, srcUrl);
}
旁注:由于所有函数都是相互独立的,也许您可以将它们移到 block 之外并在调用 browserObj.newPage() 之前声明它们
这是重构的代码,如果有问题请原谅,但你明白了。
"use strict";
const fs = require("fs");
const glob = require("glob");
const validUrl = require("valid-url");
const puppeteer = require("puppeteer");
const devices = require("puppeteer/DeviceDescriptors");
const iPhone = devices["iPhone 6"];
/**
* Loading Application Config
*/
const inputUrl = "http://www.google.com";
/**
* Controller functions
*/
async function closeHeadlesssChrome(browserObj) {
console.log("-- Trying to Close Chome Headless Window");
await browserObj.close();
}
async function setChromeViewport(pageObj) {
console.log("-- Trying to Update page viewPort");
await pageObj.setViewport({
width: 1366,
height: 738,
deviceScaleFactor: 1,
isMobile: false,
hasTouch: false,
isLandscape: false
});
}
var takeScreenshot = async function(pageObj, srcUrl) {
console.log("-- Trying to Load Web Page " + srcUrl);
await pageObj.goto(srcUrl);
console.log("-- Trying to Take Screenshot");
await pageObj.screenshot({
path: srcUrl + ".png",
clip: {
x: 0,
y: 0,
width: 795,
height: 1125
}
});
};
function getURLList() {
// Input or Source Url
const inputUrl = "C:/Users/ssp/Music/BR PUBLIC INTER COLLEGE";
var matchedFiles = [];
// Check if given Url/Path exists
if (fs.existsSync(inputUrl)) {
const inputUrlObj = fs.statSync(inputUrl);
if (inputUrlObj.isDirectory()) {
matchedFiles = glob.GlobSync(inputUrl + "/**/*.svg").found;
} else if (inputUrlObj.isFile()) {
matchedFiles.push(inputUrl);
}
return matchedFiles;
}
}
/**
* Using Puppeteer.js
*/
(async () => {
// get url list
const matchedFiles = getURLList();
if (!matchedFiles) {
console.log("-- Input Url not exists");
// if there is no url, then no need to even launch the browser and waste resources
return;
}
console.log("-- Trying to Launch Puppeteer");
const browserObj = await puppeteer.launch({
headless: true
});
console.log('-- Trying to Open New Page');
const pageObj = await browserObj.newPage();
console.log('-- Change Viewport');
await setChromeViewport(pageObj);
console.log('-- Run thru the url list');
for (const srcUrl of matchedFiles) {
await takeScreenshot(pageObj, srcUrl);
}
})();
关于javascript - 使用 Puppeteer.js 截取 URL 列表的屏幕截图,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50177980/
我最近刚跨过木偶继承。围绕它的几个问题: 使用p继承是一种好习惯吗?一些经验丰富的木偶同事告诉我,木偶的继承不是很好,我不太相信。 来自OO世界,我真的很想了解木偶继承的原理,以及覆盖的原理。 最佳答
需要一个 puppet 特工联系一些不同 puppet 师。 原因:不同的组创建了不同且独立的 list 集。 可能的组及其任务 应用程序供应商:应用程序的配置 安全性:强化 运营:路由表、监控工具
您可以在 puppet 中制作子模块吗,例如... puppet_root - modules - module_1 - submodule - manifes
在执行类 mypackage 中的代码之前,我需要执行类 mysql,tomcat。在我的 site.pp 我有 node 'node1' { include mysql,mypackage,tomc
我试图从失败的请求和js错误中收集数据。 我正在使用以下网站:https://nitzani1.wixsite.com/marketing-automation/3rd-page 该网站有一个对htt
我在 Suse 11 Linux 机器上使用 puppet 2.7.19 和 facter 1.6.0。 $::osfamily因子变量未设置,尽管它确实有 $::operatingsystem事实集
我正在使用 Puppet 开源版本。 我发现 Puppet 3.7.5 中有几个组件: puppet 大师 puppet 代理 MCollective 希拉 puppet 数据库 但我不知道他们是如何
主要目标是自动添加所有 puppet 模块,以便可以使用一个命令启动所有 dev-env 和 prod-env。如何通过 puppet manifest 安装 puppet 模块? 最佳答案 我们一直
我的 Puppet list 中有一系列 exec: 第一个下载带有二进制文件的 ZIP 文件(除非已经安装了二进制文件)并将其保存到 /tmp。 第二个将其解压缩。 当我第一次应用 list 时,它
我使用 aws opsworks 创建了 puppet master。我可以将 ami linux 节点自动添加到 puppet master。 当我尝试通过此链接 https://puppet.co
关于 this 的另一个问题问题。 有没有办法puppet module install从我已经下载到磁盘的本地存储库安装的工具? 最佳答案 您可以使用Puppet Library托管您自己的私有(p
我可以通过 Puppet Enterprise Master 到 Agent 运行几乎所有其他命令,但更新命令不会运行。据我所知,PE确实以root身份运行。 有人可以建议如何让这个命令在 Linux
我只想在 puppeteer 中刚刚打开的页面中应用标题,而不是在所有内部页面标题中应用标题 page.setExtraHTTPHeaders({ 'X-Just-Must-Be-Req
有没有什么方法可以用 Puppet 的语言声明数组中的包应该按照它们在数组中给出的顺序安装? 我想自动安装 CUDA,这需要 nvidia-driver-latest-dkms、cuda 和 cuda
鉴于这个简化的 Puppet 示例,很明显,由于 ~> 链接运算符,对 my_file 的任何更改都会触发 my_service 刷新: package { 'my_package': } -> fi
我是第一次使用 puppeteer,而不是工程师/程序员! 我已经能够生成我尝试使用 puppeteer 的大部分表单,但是我被单选按钮卡住了。网络表单中的开发人员工具显示该字段的以下内容: 使用:
如果您为代理在后台运行时执行 puppet agent -t,我们可以在其中看到更改的日志文件在哪里,而不是在 puppet 仪表板上。 我查看了 puppet.conf 并在主要部分看到了 logd
我正在尝试使用 exec 资源类型来执行批处理文件。但我想将变量 $dsn_64bit 的值从 init.pp 传递到 install.pp。请让我知道如何实现: 这是我的 init.pp class
我正在尝试使用 list 将用户分配到多个组,但遇到了障碍。 尝试 1: class usergroup { group { "user_one": ensure => present
我想先说我是 puppet 的新手。我一直在通过 vagrant 使用它并且我开始对写作表现感到自在,但我可能缺乏可以回答我的问题的经验或直觉。 我试图掌握 puppet 的范围以及画线的位置。我对这
我是一名优秀的程序员,十分优秀!