-
安 装 Node -
安 装 node_modulesnpm 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请求需进行 urlencodename 否 截图 名称 ,当 type == "data" 时生效 c / cookies 否 待 截图页面COOKIES,[{"name": "name", "value": "value", "domain": "domain"}],GET请求需进行 JSON.stringfy和 urlencodeurls 是 urls/url必有其一, 待 截图页面链接,GET请求需进行 JSON.stringfy和 urlencode- urls.url 是 待 截图页面链接- urls.name 否 截图 名称 - urls.cookies 否 待 截图页面COOKIESs 否 待 截图页面元素 ,GET请求需进行 urlencodem 0 否 是 否 为移动端,1是 0否 ,为移动端时,模 拟器为 iPhone 6device iPhone 6 否 移 动端模 拟器,默 认 iPhone 6,当 m == 1 时生效 ,模 拟器列 表 参考 :https://github.com/puppeteer/puppeteer/blob/main/src/common/DeviceDescriptors.tsf 1 否 是 否 全 屏 截屏,1是 0否 ,为1时全屏 高度 貌似为html元素 的 高度 fs 否 获取 全 屏 宽高页面元素 ,默 认 document.body.scrollWidth/document.body.scrollHeightx 0 否 截屏 左上 角 x坐 标y 0 否 截屏 左上 角 y坐 标w 否 截屏宽度 h 否 截屏 高度 t 500 否 预留页面渲染时间,单位为毫 秒 (ms)ts 0 否 截图 当 前 时间戳scale 1 否 页面 的 缩放(可 以认为是 dpr)snapType png 否 截图图片类型,jpeg/png, 默 认pngsnapQuality 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
orPOST
orJSONP
- Content-Type
支持 - application/json
- application/x-www-form-urlencoded
-
全 屏 截屏page.screenshot({ fullPage: true });
全 屏 高度 貌似为html元素 的 高度 元素 勿使用 height: 100%
之 类的属性
-
选择
器 截图当 触 发page.setViewport(viewport)
时- 页面
重 绘可能会 导致页面错乱 尽 量 最初 就设置 viewport 为合适的值,以防触 发重绘
-
功 能 类- 调用
数 据 存 储 √ - 调用
数 据 统计 √ - 图片
上 传S3 - 过期
本地 图片 支持 截图名称 √支持 RPC调用支持 异步回 调支持 主 动查询 √支持 Websocket推送
- 调用
-
优化类
- 截图
失 败重试 √ - type=data
占 位 图 - 截小图拼
大 图 √ - 优化异常处理 √
- 批量并发处理
- 截小图并发处
理 封 装 请求参 数 √封 装 返 回 函数 √系 统日志 优化
- 截图
-
部署 类生成 Docker镜像
- 截小图拼
大 图- 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
的 小 图,截取之 后 再 合成 一 张大图
Copyright(c) 2021 Lianjia, Inc. All Rights Reserved