内容简介：顺序不能变 ：顺序改变,page.on() 监听事件将无法监听爬取数组url上的所有图片，并返回其真实宽高.
基本使用
'use strict';
const puppeteer = require('puppeteer');
(async () => {
const browser = await puppeteer.launch();
const page = await browser.newPage();
let imgArr = [];
page.on('domcontentloaded', async () => {
imgArr = await page.$$eval('img', img => {
const arr = [];
// 返回的是一个集合需要重新遍历
for (let i = 0; i < img.length; i++) {
const obj = {
width: img[i].width,
naturalWidth: img[i].naturalWidth,
height: img[i].height,
naturalHeight: img[i].naturalHeight,
isStandard: !((img[i].width * 10 <= img[i].naturalWidth || img[i].height * 10 <= img[i].naturalHeight)),
url: img[i].src,
level: 3,
imageUrl: img[i].src,
describeUrl: '',
summary: `为了显示${img[i].width}x${img[i].height}的图片引入了原尺寸为${img[i].naturalWidth}x${img[i].naturalHeight}的图片`,
};
if (obj.width && obj.height) {
arr.push(obj);
}
}
return arr;
});
});
await page.goto('https://www.npmjs.com/package/puppeteer', { waitUntil: 'networkidle0' });
await browser.close();
console.log('imgArr: ', imgArr);
})();
顺序不能变 ：
- await puppeteer.launch() 启动
- await browser.newPage() 打开page
- page.on 监听事件
- await page.goto 跳转页面
- await browser.close() 关闭
顺序改变,page.on() 监听事件将无法监听
多个URL的使用方法
爬取数组url上的所有图片，并返回其真实宽高.
/* eslint-disable no-undef */
'use strict';
const puppeteer = require('puppeteer');
(async () => {
const browser = await puppeteer.launch();
const page = await browser.newPage();
let arr = [];
const html = [ 'https://www.npmjs.com/package/puppeteer', 'https://www.iconfont.cn/search/index?searchType=icon&q=test' ];
for (let i = 0; i < html.length; i++) {
await page.goto(html[i], { waitUntil: 'domcontentloaded' });
await page.waitForSelector('img', { timeout: 3000 });
// eslint-disable-next-line no-loop-func
const doms = await page.evaluate(() => {
const arr = [ ...document.querySelectorAll('img') ];
return arr.map(v => {
return {
naturalWidth: v.naturalWidth,
naturalHeight: v.naturalHeight,
width: v.width,
height: v.height,
};
});
});
arr = [ ...arr, ...doms ];
}
await browser.close();
})();
此方法大致参考了overflow上的答案：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持 码农网
猜你喜欢:
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
计算机科学概论（第12版）
[美] J.Glenn Brookshear、[美] Dennis Brylow / 刘艺、吴英、毛倩倩 / 人民邮电出版社 / 2017-1 / 69.00
《计算机科学概论》是计算机科学概论课程的经典教材，全书对计算机科学做了百科全书式的精彩阐述，充分展现了计算机科学的历史背景、发展历程和新的技术趋势。《计算机科学概论》首先介绍的是信息编码及计算机体系结构的基本原理，进而讲述操作系统和组网及因特网，接着探讨算法、程序设计语言及软件工程，然后讨论数据抽象和数据库方面的问题，讲述图形学的一些主要应用以及人工智能，以计算理论的介绍结束全书。《计算机科学概论......一起来看看 《计算机科学概论（第12版）》 这本书的介绍吧!
