(Translated by https://www.hiragana.jp/)
GitHub - LianjiaTech/Snap: 网页截图
Skip to content

LianjiaTech/Snap

Repository files navigation

环境

本地ほんじ运行

  • 启动

    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 いや 启用缓存,10いな
    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 いや 为移动端,10,为移动端时,かたぎ拟器为 iPhone 6
    device iPhone 6 いや うつり动端拟器,だま认 iPhone 6,とう m == 1 时生こうかたぎ拟器れつひょう参考さんこうhttps://github.com/puppeteer/puppeteer/blob/main/src/common/DeviceDescriptors.ts
    f 1 いや いやぜんへい截屏,10,为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 いや 页面操作そうさきさき截图,10だま认1
    - action.html いや 页面操作そうさきさき保存ほぞん页面,10だま认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