Puppeteer Screenshot

A screenshot tool with puppeteer
Alternatives To Puppeteer Screenshot
Project NameStarsDownloadsRepos Using ThisPackages Using ThisMost Recent CommitTotal ReleasesLatest ReleaseOpen IssuesLicenseLanguage
8 hours ago44agpl-3.0JavaScript
Web Extension and CLI tool for saving a faithful copy of a complete web page in a single HTML file
Browsershot4,44498275 days ago132July 27, 20234mitPHP
Convert HTML to an image, PDF or string
Puppeteer Examples2,377
3 years ago14apache-2.0JavaScript
Puppeteer example scripts for running Headless Chrome from Node.
Tlapse1,955115 years ago11August 24, 20181mitJavaScript
📷 Create a timelapse of your web development... or just automatically take screenshots of your hard work ;)
Screenshoteer1,64313 years ago12September 02, 2020mitJavaScript
Make website screenshots and mobile emulations from the command line.
Capture Website1,5821929a year ago41October 26, 202224mitJavaScript
Capture screenshots of websites
Capture Website Cli720115 months ago16February 03, 20227mitJavaScript
Capture screenshots of websites from the command-line
Storycap6432137 days ago39July 01, 202271mitTypeScript
A Storybook Addon, Save the screenshot image of your stories :camera: via puppeteer.
React Screenshot Test618146 months ago45July 17, 20211mitTypeScript
A dead simple library to screenshot test React components
3 years agomitJavaScript
λ 🖼️ Chromda is an AWS Lambda function for capturing screenshots of websites.
Alternatives To Puppeteer Screenshot
Select To Compare

Alternative Project Comparisons


A screenshot tool with puppeteer

使用 puppeteer 的截图服务

期望通过传入一段 HTML,或者一个 URL,然后能输出一张图片。

get start

npm install puppeteer-screenshot


yarn add puppeteer-screenshot


const Screenshot = require('puppeteer-screenshot');

const screenshot = new Screenshot({
  storage: {
    type: 'filesystem',
    path: ''
  pageOption: {
    timeout: 30000,
  view: {
    deviceScaleFactor: 2, // 可以理解为多倍图
    width: 750,  
    height: 1200  
  captureOption: {
    type: 'jpeg',
    quality: 75,
    fullPage: false, // 是否截取全屏
    clip: { // 裁剪
      x: 0,
      y: 0,
      width: 400,
      height: 400,
    omitBackground: false, // 是否隐藏背景
    encoding: 'binary'
  hooks: {
    beforeCapture: function(){
      // do something
    afterCapture: function(){
      // do something

const result = await screenshot.capture('http://www.baidu.com');

// 传入对象方式覆盖options
const result2 = await screenshot.capture({
  url: 'http://www.baidu.com',
  type: 'url',
  view: {
    deviceScaleFactor: 1,
    width: 750,
    height: 1200,

await screenshot.close();

close 销毁Browser实例

每个Screenshot实例只会使用一个Browser,所以在所有任务完毕后应该销毁Browser, 否则可能会导致内存泄漏;另外,服务关闭时也应该销毁Browser

process.on('exit', code => {


const screenshot = new Screenshot(options);
参数名 类型 必填 描述
optimize boolean(number) 是否压缩图片
timeout number 超时时间
storage object(function) 存储方式
view object 窗口大小
captureOption object 截图参数
hooks object 钩子

pageOption 超时时间

  • timeout [number]: 30000, 默认是 30000, 这个超时时间是指加载页面的超时时间

更多配置项请参考文档: https://pptr.dev/#?product=Puppeteer&version=v1.9.0&show=api-pagegotourl-options

storage 存储方式

  • type: 目前支持两种:filesystemqiniu, 'custom'。 filesystem即存储截图到本地文件系统, qiniu是存储截图到七牛服务, 自定义是自行处理存储;

  • path: 本地文件系统路径,默认是process.cwd(),仅在type: "filesystem"有效;

  • accessKey: 七牛参数

  • secretKey: 七牛参数

  • bucket: 七牛参数, 存储空间

  • bucketType: 七牛参数, public or private存储空间

  • deadline: 七牛参数, 仅对bucketTypeprivate时有效

  • domain: 七牛参数, 资源访问域名

  • func: 当 typecustom时有效,传出处理存储的函数,func(buffer, storage, captureOption)

注意, 当type为空时,不执行任何存储动作,直接跳到下一步

view 窗口大小

  • deviceScaleFactor: number, 窗口缩放,默认是 1 ,当数值为 2 可以理解为截图是两倍图;
  • width: number, 单位px, 默认 1280
  • height: number, 单位px, 默认 720

isSetRequestInterception 是否拦截请求, 值为boolean


interceptedRequest 请求拦截器,值为function


  interceptedRequest : (interceptedRequest) => {
    if (interceptedRequest.url().endsWith('.png') || interceptedRequest.url().endsWith('.jpg'))

captureOption 截图参数


  • type: 截图格式,目前只支持jpegpng
  • quality: 截图质量
  • fullPage: boolean 是否截取整页,false是只截取可见部分
  • clip: 裁剪,具体如下:
      x: 0,
      y: 0,
      width: 400,
      height: 400,
      omitBackground: false // 是否隐藏背景


为了更加方便地扩展,提供了四个基本的 hooks:

  • beforeCreatePage: function return Promise, 创建页面前调用
  beforeCreatePage(browser, ctx)
  • afterCreatePage function return Promise, 创建页面后调用
  afterCreatePage(page, browser, ctx)
  • beforeCapture function return Promise, 在截图前调用
  • afterCapture function return Promise, 在截图后调用


如果钩子无法满足扩展的需求,那么可以使用 middleware 来扩展,例如:

  enable: true,
  module: async (ctx, next) => {
    // do something...
  priority: 60,

priority 代表执行权重:

priority < 50: 在页面初始化之前执行 priority > 50 && priority < 150: 在截图前执行 priority > 150 && priority < 200: 在截图后,存储前执行 priority > 200 在存储后执行


npm run test
Popular Puppeteer Projects
Popular Screenshot Projects
Popular Web Browsers Categories

Get A Weekly Email With Trending Projects For These Categories
No Spam. Unsubscribe easily at any time.