批量网页截图出图方式及应用场景:

1.【#长截图#】:自动滚动滚动条逐屏加载实现完整长文章截图、整体设计效果截图、新闻舆情取证截图等

2.【#可视截图#】:滚动到某个位置后截取可视内容为图片，如淘宝客优惠券、会员卡、二维码、条形码的截图等；

3.【#缩略图#】:宝贝主图、分类列表等展示用途使用的指定大小的缩略图；

4.【#超高分段截图#】:适合前端网页加载等；

5.【#手机/Pad截图#】:仿真模拟任何智能设备，看得见截的到；

6.【#裁图切图#】:掐头去尾、定距裁剪；

7.【#浏览器外观截图#】:保留浏览器外观截图，保留原网址出处和网页标题，可作公证证据；

8.【#先点击后截图#】:先模拟人工自动单击或双击再截图，适合需要点击后才能看到的内容的截图；

9:【#科学截图#】:通过代理设置科学访问海外网页；

10:【#指定尺寸截图#】:针对智能响应的网页大小受设备尺寸限制无法截取想要内容的情况

软件免费下载链接地址：

① GitHub仓库下载：
O网页链接

② 百度云盘 ：（如提示不存在，请按 F5 刷新页面）
链接：O网页链接  密码：tduk 

词条标签：

批量截图、 网页生成JPG图片、 批量截屏工具、 WebShot、批量网页截图软件、 网址批量截图工具、 网页批量自动截图工具、 网站截图助手

数据来源为一个txt文件

每一行用\t分割后 前面是域名后面是url 域名用来md5后作为截图名

pageSize控制一次最多打开多少个页面 防止网页过多占用内存过多

配置里的'--proxy-server=socks5://127.0.0.1:1080' 是用来走本地小飞机代理的

const puppeteer = require('puppeteer');
var fs = require('fs');
var readline = require('readline');
const crypto = require('crypto');
var file = '/test/snap.txt';
//最多多少个页面
const pageSize = 50;
var date = new Date();
var startTime = date.getTime();
readFileToArr(file ,async function (data){
	console.log('本次需要截图[' + data.length+']条')
	console.log('开始执行：'+startTime);
	if(data.length>0){
		snp(data).then(() => {
		console.log('执行清空文件操作');
		fs.access(file, fs.constants.F_OK, (err) => {
			console.log(`${file} ${err ? '不存在' : '存在'}`);
			var ws1 = fs.createWriteStream(file, 'utf-8');
			ws1.write('');
			ws1.end();
			console.log(`${file}`  +' 已清空');
		});
		}).catch(function (err) {
			console.log(err);
		});;
	}
});
	
	
async function snp(arr){
    const config = {
		ignoreHTTPSErrors:true,
		defaultViewport:{width:1920,height:1080},
        args: [
            '--no-sandbox','--proxy-server=socks5://127.0.0.1:1080'
        ],
        headless: true
    }
    const browser = await puppeteer.launch(config);
    var that = this;

	while(arr.length>0){
		
		var some;
		if(arr.length >pageSize){
			some = arr.splice(0,pageSize);
		}else{
			some = arr.splice(0,arr.length);
		}
		var length = some.length;
		var a = [];
		for (let j = 0; j < length; j++) {
		    if(some[j] === '') continue;
		    var line = some[j].split('\t');
		    if(line.length !==2 ){console.log('数据不全：' + some[j]);continue;}
		    var domain = line[0];
		    var url = line[1];
            var page = await browser.newPage();

		    //默认30S超时
		    //page.setDefaultNavigationTimeout(3000)；
	        try{
                await page.goto(url);
	            console.log('已打开：'+url);
		        page.on('dialog', async dialog => {
		        await dialog.accept();
		    });
	        }catch(err){
	        	console.log('打开网页出错：'+err);
	        }
            a.push(page);
	    }
		//等待时间 可调整
		//await a[0].waitFor(1 * 1000);
		for (i = 0; i < length; i++) {
		    if(some[i] === '') continue;
		    var line = some[i].split('\t');
		    if(line.length !==2 ){console.log('数据不全：' + some[i]);continue;}
		    var domain = line[0];
		    var url = line[1];
		    var fileName = getMD5(domain) + '.png';
            try {
                await a[i].screenshot({ path: '/test/snapshot/'+fileName });
                console.log('截图成功： '+domain);
		    	await a[i].close();
            } catch (e) {
                console.log('截图出错： '+e)
            }
		}
		
	}
 
    await browser.close();
    var endTime =  new Date().getTime();
    console.log('执行结束：'+endTime);
    console.log('本次执行时间：' + (endTime-startTime)/1000 + 's');
}

//读取文件
function readFileToArr(fReadName,callback){
    var fRead = fs.createReadStream(fReadName);
    var objReadline = readline.createInterface({
        input:fRead
    });
    var arr = new Array();
    objReadline.on('line',function (line) {
        arr.push(line);
        //console.log('line:'+ line);
    });
    objReadline.on('close',function () {
       // console.log(arr);
        callback(arr);
    });
}
//获取md5值
function getMD5(data) {
    // 加入字符编码
    var md5 = crypto.createHash('md5').update(data, 'utf-8').digest('hex');
	return md5;
}

目前还可以优化的地方：

当前流程是依次打开网页，等待当前网页加载完成后再去打开下一个网页，若某一个网页打开较慢或打不开，则会一直等待到超时。

可以改为调用goto后不等待，并行的打开网页，大大减少打开网页过程中花费的时间。

第二版

由于第一版 虽说是一次打开多个标签页了，但是实质上还是和串行一个个打开没有区别，我在page的load事件上也没有找到能保存当前页面上下文并使其在后面可选择使用的好办法。

所以不如直接使用串行 由于截图任务要的是准确第一 速度第二 所以改为串行也未尝不可

主要改动的地方就是snp()方法 并且删掉了pageSize这个常量

async function snp(arr){
    const config = {
		ignoreHTTPSErrors:true,
		defaultViewport:{width:1920,height:1080},
        args: [
            '--no-sandbox','--start-maximized'
        ],
        headless: false
    }
    const browser = await puppeteer.launch(config);
	var page = await browser.newPage();
	for(let i=0;i<arr.length;i++){
		if(arr[i] === '') continue;
		var line = arr[i].split('\t');
		if(line.length !==2 ){console.log('数据不全：' + arr[i]);continue;}
		var domain = line[0];
		var url = line[1];
		var fileName = getMD5(domain) + '.png';
		await page.goto(url,{waitUntil: ['networkidle0']}).then(()=>{
			console.log('已打开：'+url);
		}).catch( err =>{
			console.log('打开网页出错:' + url);
		});
		page.on('dialog', async dialog => {
			await dialog.accept();
		});
        await page.screenshot({path: '/Users/rzx/Desktop/snapshot/'+fileName});
        console.log('截图成功： '+domain);
		
	}
	await page.close();
	await browser.close();
	var endTime =  new Date().getTime();
	console.log('本次执行时间：' + (endTime-startTime)/1000 + 's');
}

1. 为什么使用--start-maximized这个参数：有些网页在最大化下和它默认大小下 截出来的图片不一样 默认尺寸下可能会出现拼接的情况
2. await page.goto(url,{waitUntil: ['networkidle0']}) 此处waitUntil的作用：有些网页 打开后会继续请求js 做出动画或改变样式 添加此参数的意思是直到没有任何网络连接 视为跳转成功。可以有效避免部分网页刚打开 load事件触发了就截图 截出的图不完整