网页截图

环境依赖

安装 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