环境依赖

• 安装 Node

  • https://nodejs.org/zh-cn/download/

• 安装 node_modules

  npm ci

本地运行

• 启动

  npm run node-debug

• 地址

  http://127.0.0.1:3000/api/shot?url=https%3A%2F%2Fwww.baidu.com%2F

线上部署

• PM2

  npm run deploy

接口文档

• 参数

  属性	类型	默认值	必填	说明
  src / source			否	调用方 标识
  callback			否	JSONP 回调函数，不传为非 JSONP 请求
  cache		0	否	是否启用缓存，1是0否
  type		data	否	返回类型，data文件url链接
  resheaders			否	Response Headers，当 type == "data" 时生效
  url			是	urls/url必有其一，待截图页面链接，GET请求需进行 urlencode
  name			否	截图名称，当 type == "data" 时生效
  c / cookies			否	待截图页面COOKIES，[{"name": "name", "value": "value", "domain": "domain"}]，GET请求需进行 JSON.stringfy 和 urlencode
  urls			是	urls/url必有其一，待截图页面链接，GET请求需进行 JSON.stringfy 和 urlencode
  - urls.url			是	待截图页面链接
  - urls.name			否	截图名称
  - urls.cookies			否	待截图页面COOKIES
  s			否	待截图页面元素，GET请求需进行 urlencode
  m		0	否	是否为移动端，1是0否，为移动端时，模拟器为 iPhone 6
  device		iPhone 6	否	移动端模拟器，默认 iPhone 6，当 m == 1 时生效，模拟器列表参考：https://github.com/puppeteer/puppeteer/blob/main/src/common/DeviceDescriptors.ts
  f		1	否	是否全屏截屏，1是0否，为1时全屏高度貌似为html元素的高度
  fs			否	获取全屏宽高页面元素，默认 document.body.scrollWidth/document.body.scrollHeight
  x		0	否	截屏左上角x坐标
  y		0	否	截屏左上角y坐标
  w			否	截屏宽度
  h			否	截屏高度
  t		500	否	预留页面渲染时间，单位为毫秒(ms)
  ts		0	否	截图当前时间戳
  scale		1	否	页面的缩放（可以认为是 dpr）
  snapType		png	否	截图图片类型，jpeg/png，默认png
  snapQuality		1	否	截图图片质量，0-100，默认100，当 snapType == "jpeg" 时生效
  preActions			否	开始截图前，页面操作，GET请求需进行 JSON.stringfy 和 urlencode
  - action.event			否	开始截图前，页面操作类型，支持类型：init(初始化)/click(点击)/tap(移动端点击)/back(返回)/wait(停留)/drag(拖拽)
  - action.selector			否	开始截图前，页面操作元素，->click
  - action.xy			否	开始截图前，页面拖拽坐标，[[100, 100], [100, 10], [200, 10], ...]，->click/drag
  - action.time			否	开始截图前，页面操作后，预留页面渲染时间，单位为毫秒(ms)
  actions			否	页面操作，GET请求需进行 JSON.stringfy 和 urlencode
  - action.event			否	页面操作类型，支持类型：init(初始化)/click(点击)/tap(移动端点击)/back(返回)/wait(停留)/drag(拖拽)
  - action.selector			否	页面操作元素，->click
  - action.xy			否	页面拖拽坐标，[[100, 100], [100, 10], [200, 10], ...]，->click/drag
  - action.time			否	页面操作后，预留页面渲染时间，单位为毫秒(ms)
  - action.s			否	页面操作后，截图元素
  - action.name			否	页面操作后，截图名称
  - action.snap			否	页面操作后，是否截图，1是0否，默认1
  - action.html			否	页面操作后，是否保存页面，1是0否，默认0

• 调用

  • GET or POST or JSONP
  • Content-Type 支持
    • application/json
    • application/x-www-form-urlencoded

注意事项

• 全屏截屏

  page.screenshot({
    fullPage: true
  });

  • 全屏高度貌似为html元素的高度
  • 元素勿使用 height: 100% 之类的属性

• 选择器截图

  • 当触发 page.setViewport(viewport) 时
  • 页面重绘可能会导致页面错乱
  • 尽量最初就设置 viewport 为合适的值，以防触发重绘

TODO

• 功能类

  • 调用数据存储 √
  • 调用数据统计 √
  • 图片上传S3
  • 过期本地图片
  • 支持截图名称 √
  • 支持RPC调用
  • 支持异步回调
  • 支持主动查询 √
  • 支持Websocket推送

• 优化类

  • 截图失败重试 √
  • type=data占位图
  • 截小图拼大图 √
  • 优化异常处理 √
  • 批量并发处理
  • 截小图并发处理
  • 封装请求参数 √
  • 封装返回函数 √
  • 系统日志优化

• 部署类

  • 生成Docker镜像

Why’s The Design

• 截小图拼大图
  • Chrome seems to have a hard limit when taking screenshots of long pages
  • devtools-frontend/front_end/emulation/DeviceModeModel.js

    // Cap the height to not hit the GPU limit.
    const contentHeight = Math.min((1 << 14), metrics.contentHeight);
    clip = {x: 0, y: 0, width: Math.floor(metrics.contentWidth), height: Math.floor(contentHeight), scale: 1};

  • 上限 — 1 << 14 — 16384px
  • 导致超过上限的图截取不全
  • 所以设计成，宽或高超过上限，就拆成最大 16384px * 16384px 的小图，截取之后再合成一张大图

版本记录

CHANGELOG

License

MIT

Copyright(c) 2021 Lianjia, Inc. All Rights Reserved