puppeteer-screenshot

1.0.11 • Public • Published

puppeteer-screenshot

A screenshot tool with puppeteer

使用 puppeteer 的截图服务

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

get start

npm install puppeteer-screenshot

或者

yarn add puppeteer-screenshot

usage

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 => {
  screenshot.close();
});

Options

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

注意:当isSetRequestInterceptiontrue时,缓存失效

interceptedRequest 请求拦截器,值为function

例如:

{
  interceptedRequest : (interceptedRequest) => {
    if (interceptedRequest.url().endsWith('.png') || interceptedRequest.url().endsWith('.jpg'))
      interceptedRequest.abort();
    else
      interceptedRequest.continue();
  }
}

captureOption 截图参数

详细请参考文档:https://pptr.dev/#?product=Puppeteer&version=v1.9.0&show=api-pagescreenshotoptions

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

hooks

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

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

middleware

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

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

priority 代表执行权重:

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

Test

npm run test

Readme

Keywords

none

Package Sidebar

Install

npm i puppeteer-screenshot

Weekly Downloads

1

Version

1.0.11

License

MIT

Unpacked Size

57.1 kB

Total Files

20

Last publish

Collaborators

  • lingxuan630