puppeteer截图

puppeteer是谷歌官方出品的一个通过 DevTools 协议控制 headless Chrome 的Node库。可以通过Puppeteer的提供的api直接控制Chrome模拟大部分用户操作来进行UI Test或者作为爬虫访问页面来收集数据。
安装
直接运行安装命令:
npm install puppeteer
如果出现无法安装的问题,可以使用淘宝镜像。
puppeteer实现滑动截图
在我 puppeteer 使用截全屏的过程中发现有些图片无法截取到,而实际上是因为有些图片是懒加载的,如果你没有滑动到图片的位置,那么这个图片是不会加载。
现在我的方式是采用模拟浏览器滚动条滑动的方式滑动底部来使图片加载出来。
代码如下:
const puppeteer = require('puppeteer');
(async () => {
const browser = await puppeteer.launch({
headless: false
});
const page = await browser.newPage();
await page.goto('https://www.cnblogs.com/morethink/p/6525216.html');
await page.setViewport({
width: 1200,
height: 800
});
await autoScroll(page);
await page.screenshot({
path: '1.png',
fullPage: true
});
await browser.close();
})();
function autoScroll(page) {
return page.evaluate(() => {
return new Promise((resolve, reject) => {
var totalHeight = 0;
var distance = 100;
var timer = setInterval(() => {
var scrollHeight = document.body.scrollHeight;
window.scrollBy(0, distance);
totalHeight += distance;
if (totalHeight >= scrollHeight) {
clearInterval(timer);
resolve();
}
}, 100);
})
});
}
动图如下:

puppeteer 实现 html element 截图
在某些情况下我们只想要针对html的某个位置进行截图而不是针对页面截全屏。
puppeteer提供了ElementHandle.screenshot 方法,该方法参数和page.screenshot 一样。而ElementHandle 对象是页面内的Dom对象。可以帮助我对 html element进行截图。这样的话你想截取页面的哪部分就截取页面的哪部分。
代码如下:
const puppeteer = require('puppeteer');
(async () => {
const browser = await puppeteer.launch({
headless: false
});
const page = await browser.newPage();
await page.goto('https://www.cnblogs.com/morethink/p/6525216.html');
await page.setViewport({
width: 1200,
height: 800
});
//获取页面Dom对象
let body = await page.$('#cnblogs_post_body');
//调用页面内Dom对象的 screenshot 方法进行截图
await body.screenshot({
path: '2.png'
});
await browser.close();
})();
参考文档:
puppeteer截图的更多相关文章
- Puppeteer 截图及相关问题
Puppeteer 是 Headless Chrome 的 Node.js 封装.通过它可方便地对页面进行截图,或者保存成 PDF. 镜像的设置 因为其使用了 Chromium,其源在 Google ...
- Puppeteer之大屏批量截图
事情的起因是客户三天两头的要求让我们给大屏截图,一定要最新的数据.所以我就自告奋勇研究了一下. puppeteer是一款headless浏览器,由谷歌官方维护.先看看puppeteer ...
- puppeteer实现线上服务器任意区域截图
整个九月份由于业务繁重以及玩心颇重,一直没有机会来写一篇博文.而且笔者于十月一日将会举办人生大事--婚礼,现在家里筹办过程中只能抽出零碎的时间来写这篇文章. 关于服务端截图,这种使用场景非常少见,大多 ...
- puppeteer 爬虫 pdf 截图 自动化
puppeteer简介 puppeteer 翻译是操纵木偶的人,利用这个工具,我们能做一个操纵页面的人.puppeteer是一个nodejs的库,支持调用Chrome的API来操纵Web,相比较Sel ...
- 在linux (centos)上使用puppeteer实现网页截图
1.安装nodejs和npm # 下载解压 wget -c https://nodejs.org/dist/v8.9.1/node-v8.9.1-linux-x64.tar.xz tar -xvf n ...
- 有了 serverless,前端也可以快速开发一个 Puppeteer 网页截图服务
更多云原生技术资讯可关注阿里巴巴云原生技术圈. Puppeteer 是什么? puppeteer 官网的介绍如下: Puppeteer is a Node library which provides ...
- nodejs puppeteer linux(centos)环境部署以及用puppeteer简单截图
1.安装Node环境 如果有安装Node请忽略第1点 #下载cd /usr/local/srcwget https://nodejs.org/dist/v10.15.3/node-v10.15.3-l ...
- 使用node+puppeteer+express搭建截图服务
使用node+puppeteer+express搭建截图服务 转载请注明出处https://www.cnblogs.com/funnyzpc/p/14222807.html 写在之前 一开始我们的需求 ...
- 使用puppeteer生成pdf与截图
之前写过一篇 vue cli2 使用 wkhtmltopdf 踩坑指南,由于wkhtmltopdf对vue的支持并不友好,而且不支持css3,经过调研最终选择puppeteer,坑少,比较靠谱. 一. ...
随机推荐
- 操作系统 cmd mini OS
#include <stdio.h>#include <stdlib.h>#include <string.h> void word(char *a){ if(st ...
- tomcat 启动异常 EOFException: Unexpected end of ZLIB input stream
EVERE: Exception fixing docBase for context [/agdis] java.io .EOFException: Unexpected end of ZLIB i ...
- struts2针对mvc的框架 spring针对解耦与事务的框架
struts2针对mvc的框架 spring针对解耦与事务的框架
- 一条慢SQL引发的血案
直接切入正题吧: 通常来说,我们看到的慢查询一般还不致于导致挂站,顶多就是应用响应变慢不过这个恰好今天被我撞见了,一个慢查询把整个网站搞挂了先看看这个SQL张撒样子: # Query_time: 70 ...
- vue项目使用eslint
转载自 https://www.cnblogs.com/hahazexia/p/6393212.html eslint配置方式有两种: 注释配置:使用js注释来直接嵌入ESLint配置信息到一个文件里 ...
- c语言宏定义#define
1. 利用define来定义 数值宏常量 #define 宏定义是个演技非常高超的替身演员,但也会经常耍大牌的,所以我们用它要慎之又慎.它可以出现在代码的任何地方,从本行宏定义开始,以后的代码就就都认 ...
- PowerDesigner在生成SQL时报错Generation aborted due to errors detected during the verification of the mod
一.本章节要用到 ODBC连接数据库直接创建表,请先创建连接库的ODBC 请参考 新建 http://www.cnblogs.com/wdw31210/p/7580286.html 二.生成 去 ...
- SDNnet PX Programmming Language
写在前面 本篇是关于 SDNet PX Programming Language User Guide 其中「Introduction」 部分的一些翻译.理解以及我从其他方面看来的一些资料的整合.网上 ...
- C++11新特性——大括号初始化
C++11之前,C++主要有以下几种初始化方式: //小括号初始化 string str("hello"); //等号初始化 string str="hello" ...
- Codeforces Good Bye 2018
咕bye 2018,因为我这场又咕咕咕了 无谓地感慨一句:时间过得真快啊(有毒 A.New Year and the Christmas Ornament 分类讨论后等差数列求和 又在凑字数了 #in ...