V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
iLionel
V2EX  ›  分享创造

📷 page2image - 一个给页面截图的新 npm 轮子 🚗

  •  
  •   iLionel ·
    runjuu · 2017-08-27 21:43:27 +08:00 · 5869 次点击
    这是一个创建于 2643 天前的主题,其中的信息可能已经有所发展或是发生改变。

    虽然大家都在用 Headless Chrome 做自动化测试,但其实用它来对页面进行截图也是挺不错的 😆

    page2image 食用姿势

    第 1 条附言  ·  2017-08-29 17:21:53 +08:00

    🎉 page2image 发布了 1.4.0 版本 🎉

    新增了模拟设备的功能 👉 食用方法

    第 2 条附言  ·  2017-08-29 18:09:32 +08:00

    食用的时候出现了意想不到的状况怎么办? 👉 扔个 issue

    第 3 条附言  ·  2017-08-29 18:46:34 +08:00

    🎊 page2image 发布了 1.5.0 版本 🎊

    CLI 命令新增 @moro 同学提出的给截图文件命名的功能 👉 食用方法

    第 4 条附言  ·  2017-09-03 17:55:14 +08:00

    🎉 page2image 发布了 1.6.0 版本 🎉

    CLI 新增了滚动到页面底部的参数 👉 食用方法

    需要注意的是你可能会需要加上 --dpr=1 的参数来降低截图的清晰度以避免因页面过大而出现空白块的问题

    34 条回复    2017-09-04 20:17:34 +08:00
    Showfom
        1
    Showfom  
       2017-08-28 06:00:43 +08:00   ❤️ 1
    支持一下
    apppi
        2
    apppi  
       2017-08-28 10:13:28 +08:00
    @iLionel 本地服务器上的页面是不能截图的吗
    iLionel
        3
    iLionel  
    OP
       2017-08-28 10:21:55 +08:00
    @apppi 能用 url 访问的页面都能截图的
    apppi
        4
    apppi  
       2017-08-28 11:03:03 +08:00   ❤️ 1
    @iLionel localhost 和 127.0.0.1 这样的 似乎不行?
    iLionel
        5
    iLionel  
    OP
       2017-08-28 11:11:01 +08:00
    @apppi 你可能会需要加上 http 前缀,这种情况我还没考虑到,等下更新一个修复版本上去
    iLionel
        6
    iLionel  
    OP
       2017-08-28 11:25:07 +08:00
    @apppi 好吧,你的那个问题其实是因为链接正则没有匹配上..最新的那一版已经修复了这个问题了 感谢反馈~
    bhaltair
        7
    bhaltair  
       2017-08-28 17:59:29 +08:00 via Android
    dev tool 不是已经有截图了
    iLionel
        8
    iLionel  
    OP
       2017-08-28 18:07:12 +08:00
    @bhaltair [What's New In DevTools (Chrome 59)]https://developers.google.com/web/updates/2017/04/devtools-release-notes#screenshots,是的,不过总是会有需要从代码层面或用 CLI 命令进行截图调用,要不然怎么称之为轮子呢 🤓
    iLionel
        9
    iLionel  
    OP
       2017-08-28 18:08:57 +08:00
    UniDash
        10
    UniDash  
       2017-08-28 21:22:22 +08:00
    啊哈,我在自己的 side project https://www.v2ex.com/t/386460#reply0
    里面有用到类似的工具,但是不是很满意,下班回去试试楼主的产品。
    holajamc
        11
    holajamc  
       2017-08-29 09:17:06 +08:00
    同用 dev tool 做的,求问楼主怎么解决整页截图…
    iLionel
        13
    iLionel  
    OP
       2017-08-29 11:29:48 +08:00
    ...回复的 MD 有毒
    hoythan
        14
    hoythan  
       2017-08-29 11:45:26 +08:00
    v2 "人性化"的只有发帖有支持 markdown。
    holajamc
        15
    holajamc  
       2017-08-29 12:01:49 +08:00
    @iLionel 一直在纠结大小什么的谢谢楼主~
    holajamc
        16
    holajamc  
       2017-08-29 12:04:07 +08:00   ❤️ 1
    有一个 py 的轮子,功能类似 233~
    iLionel
        17
    iLionel  
    OP
       2017-08-29 12:08:26 +08:00
    @hoythan 原来是这样 😂
    moro
        18
    moro  
       2017-08-29 17:39:44 +08:00   ❤️ 1
    命令行保存文件名称使用什么方法。
    iLionel
        19
    iLionel  
    OP
       2017-08-29 17:45:20 +08:00
    @moro 目前还没有重命名的参数,因为是支持多个页面截图,现在还没考虑好怎么给各个截图命名 ,或许多页面时当作前缀会是一个不错的方案 🤔?我下一个版本更新上去吧 🤓
    moro
        20
    moro  
       2017-08-29 18:02:33 +08:00   ❤️ 1
    @iLionel windows 命令行下面带问号的网址 会报错。
    iLionel
        21
    iLionel  
    OP
       2017-08-29 18:05:21 +08:00
    @moro hum...[提个 Issus]( https://github.com/Runjuu/page2image/issues/new) 吧,这边我好追踪这个 issue
    iLionel
        22
    iLionel  
    OP
       2017-08-29 21:02:52 +08:00
    @moro windows 命令行下面带问号的网址 会报错的问题已经在最新的版本( 1.5.1 )中修复了
    jamesliu96
        23
    jamesliu96  
       2017-08-31 03:48:06 +08:00   ❤️ 1
    in the description, '...is AN npm package...', vow article plz

    sorry for interrupting
    iLionel
        24
    iLionel  
    OP
       2017-08-31 09:39:03 +08:00 via iPhone
    @jamesliu96 hmm,能否提个 issue 详细说明一下这个问题 🤓

    https://github.com/Runjuu/page2image/issues/new
    zhangneww
        25
    zhangneww  
       2017-08-31 16:24:24 +08:00   ❤️ 1
    @iLionel 本站只有主题可以使用 MD,回复不支持 MD。
    jamesliu96
        26
    jamesliu96  
       2017-08-31 19:36:18 +08:00 via Android   ❤️ 1
    @iLionel description 里面 a 改成 an 就好 hhh,我强迫症不要理我。。。
    iLionel
        27
    iLionel  
    OP
       2017-08-31 20:16:04 +08:00
    @jamesliu96 啊... 我懵逼了 😂 我直接把回复的英文当作报错在看..然后..一直没想到..这到底哪个地方会报这个错 💀 谢谢指正 已修改
    RyougiShiki
        28
    RyougiShiki  
       2017-09-01 15:20:58 +08:00
    挺有用的,现在主流网站没有功能还要自己装 chrome 插件。
    moro
        29
    moro  
       2017-09-01 23:10:27 +08:00   ❤️ 1
    @iLionel 截取动态加载图片的网站可能会有问题,比如 taobao 首页,是不是要模拟缓慢滚动到底。
    iLionel
        30
    iLionel  
    OP
       2017-09-01 23:51:06 +08:00
    @moro 用 CLI 命令的确是有这个问题,而且对于使用虚拟 DOM 渲染的页面,也会存在页面没有渲染完就截图的情况,第一个比较容易实现,第二个虚拟 DOM 的问题可以用判断某些元素是否存在来解决,我这个周末优化一下

    然后现在还遇到的一个问题是写在 CSS 里面的外链图片资源没办法判断是否加载完成,这就比较尴尬了...
    iLionel
        31
    iLionel  
    OP
       2017-09-03 17:57:06 +08:00
    @moro 已更新,不过页面太大的话,会因为性能问题导致截图出现一些不完整的空白块,目前还没有很好的解决方法
    esmdxx1
        32
    esmdxx1  
       2017-09-04 10:18:01 +08:00 via iPhone
    @Showfom 支持
    moro
        33
    moro  
       2017-09-04 20:08:07 +08:00
    可以提供 docker 运行的容器吗。
    iLionel
        34
    iLionel  
    OP
       2017-09-04 20:17:34 +08:00
    @moro 之前公司的运维同学貌似有弄过,我找个时间更新上去吧
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   4328 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 47ms · UTC 10:06 · PVG 18:06 · LAX 02:06 · JFK 05:06
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.