📷 page2image - 一个给页面截图的新 npm 轮子 🚗
iLionel · runjuu · 2017-08-27 21:43:27 +08:00 · 5876 次点击这是一个创建于 2646 天前的主题，其中的信息可能已经有所发展或是发生改变。
虽然大家都在用 Headless Chrome 做自动化测试，但其实用它来对页面进行截图也是挺不错的 😆
第 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
 |
1
Showfom 2017-08-28 06:00:43 +08:00  1
支持一下
|
 |
7
bhaltair 2017-08-28 17:59:29 +08:00 via Android
dev tool 不是已经有截图了
|
 |
8
iLionel OP @bhaltair [What's New In DevTools (Chrome 59)]https://developers.google.com/web/updates/2017/04/devtools-release-notes#screenshots，是的，不过总是会有需要从代码层面或用 CLI 命令进行截图调用，要不然怎么称之为轮子呢 🤓
|
|
9
iLionel OP [What's New In DevTools (Chrome 59)]( https://developers.google.com/web/updates/2017/04/devtools-release-notes#screenshots) 👆
|
 |
10
UniDash 2017-08-28 21:22:22 +08:00
啊哈，我在自己的 side project https://www.v2ex.com/t/386460#reply0
里面有用到类似的工具，但是不是很满意，下班回去试试楼主的产品。 |
 |
11
holajamc 2017-08-29 09:17:06 +08:00
同用 dev tool 做的，求问楼主怎么解决整页截图…
|
|
12
iLionel OP @holajamc 整页截图的话，[官方博文]( https://developers.google.com/web/updates/2017/04/headless-chrome#screenshots)其实已经给出[方案]( https://medium.com/@dschnr/using-headless-chrome-as-an-automated-screenshot-tool-4b07dffba79a)了，当然这里用的是[Chrome 自家出的]( https://developers.google.com/web/updates/2017/04/headless-chrome#node)的[puppeteer]( https://github.com/GoogleChrome/puppeteer)
|
|
13
iLionel OP ...回复的 MD 有毒
|
 |
14
hoythan 2017-08-29 11:45:26 +08:00
v2 "人性化"的只有发帖有支持 markdown。
|
|
16
holajamc 2017-08-29 12:04:07 +08:00 1
有一个 py 的轮子，功能类似 233~
|
 |
18
moro 2017-08-29 17:39:44 +08:00 1
命令行保存文件名称使用什么方法。
|
|
19
iLionel OP @moro 目前还没有重命名的参数，因为是支持多个页面截图，现在还没考虑好怎么给各个截图命名 ，或许多页面时当作前缀会是一个不错的方案 🤔？我下一个版本更新上去吧 🤓
|
|
21
iLionel OP @moro hum...[提个 Issus]( https://github.com/Runjuu/page2image/issues/new) 吧，这边我好追踪这个 issue
|
 |
23
jamesliu96 2017-08-31 03:48:06 +08:00 1
in the description, '...is AN npm package...', vow article plz
sorry for interrupting |
|
24
iLionel OP |
|
26
jamesliu96 2017-08-31 19:36:18 +08:00 via Android 1
@iLionel description 里面 a 改成 an 就好 hhh，我强迫症不要理我。。。
|
|
27
iLionel OP @jamesliu96 啊... 我懵逼了 😂 我直接把回复的英文当作报错在看..然后..一直没想到..这到底哪个地方会报这个错 💀 谢谢指正 已修改
|
 |
28
RyougiShiki 2017-09-01 15:20:58 +08:00
挺有用的，现在主流网站没有功能还要自己装 chrome 插件。
|
|
30
iLionel OP @moro 用 CLI 命令的确是有这个问题，而且对于使用虚拟 DOM 渲染的页面，也会存在页面没有渲染完就截图的情况，第一个比较容易实现，第二个虚拟 DOM 的问题可以用判断某些元素是否存在来解决，我这个周末优化一下
然后现在还遇到的一个问题是写在 CSS 里面的外链图片资源没办法判断是否加载完成，这就比较尴尬了... |
|
33
moro 2017-09-04 20:08:07 +08:00
可以提供 docker 运行的容器吗。
|
Select Language