网页收成图片会漏掉什么:脚本跑出来的那一层
网页收成图片会漏掉什么,取决于这一页有多少东西是靠脚本撑起来的。在页面成图里,读的是这一页的标记,再按标记画成一张图。脚本在这台浏览器里不执行。所以页面打开之后才由脚本补上去的内容,收下来的图里没有。
标记里写着的都在:标题、段落、表格、边框、底色、字号、行距、静态的图片。脚本后来的动作都在图外:轮播翻到第二张、点了才展开的评论、滚到底才补上的列表、提交后才出现的提示。这不是画质问题,那一块内容从来没进过标记。
页面成图只收静态内容。脚本不运行,登录后的页面不会出现,跨域的图片也不会出现。
脚本不跑,页面停在第一次画出来的样子
一个靠脚本切换的轮播,收下来是第一张。滚动才加载的图,收下来是空位。按钮点开才有的弹层,收下来根本没有这一层。你要的那句话如果只在弹层里,这张图就帮不上你。
登录之后的页面同样不出现。要收的是登录后才看得到的内容,图里只会有登录框,或者一片空白。就绪图没有登录,也没有用来接收图片的账号服务器,它不会替你去登录任何站点。这一页只看浏览器能读到的公开标记。
跨域的图片会空着
页面上的图如果放在别的域名下,收图时读不到那些像素,位置就空着。同一站点下的图正常出现。你看到一块留白、一个裂开的图框、或者只剩边框,多半是这件事,不是图片坏了。
- 脚本生成的内容:轮播第二张、点开才有的评论、滚动才补的列表。
- 登录之后的页面:收下来只有登录框,或者空白。
- 跨域的图片:位置空着,只剩边框或者留白。
地址读不到,就把 HTML 贴进去
有些页面在浏览器里读不到地址:还在本地没上线的、要连内网才打得开的、临时拼出来的片段。这时改成把 HTML 源码贴进去,收的还是同一套静态标记,漏掉的也还是同一批东西。
视口宽度最窄按 320 来理解。窄屏和宽屏是两套排版,同一页在两处收下来不一样。收之前先想清楚这张图给谁看:给手机看,就按窄的来。
输出三种,挑一种
可以出 JPG、PNG,也可以出包了一层像素图的 SVG。截图、以文字为主、还要贴进文档的,留 PNG,字边更干净。要发到只认 JPG 的地方,出 JPG。那个 SVG 只是把像素包了一层外壳,不是能无限放大的矢量,放大一样会糊。
图太大不好发,就再走一趟体积收缩。收的是刚下载下来的那一份,原来的网页没有被改动。
页面成图一次做一页。它不接过 40 个文件那种批量,做完一页下载一页。
这张图适合拿来做什么
把一页排版固定下来,发给不方便打开链接的人。留一份当时的证据,防止页面第二天改了。贴进说明文档,让读者不用跳出去。这些都用得上。
不适合拿它去抓一段过程:滚动动画的中间帧、加载时的骨架屏、鼠标悬停才变的样子。那些都要脚本跑起来才有,而这里脚本不跑。
只有两件事会碰到网络
打开页面时,这次访问交给 51.LA 统计,统计的是有人打开了页面,不是图片文件。文件怎么处理写了这条边界:图片不上传到就绪图,这里没有登录,也没有注册。
另一件是第一次抠图会下载一份识别模型到这台设备的缓存,那是另一道工序,跟收网页无关。计算结果留在本地,下载下来的是这台设备刚生成的新文件。
收下来之后看三眼
- 文字有没有被挤断。宽屏排版塞进窄视口,标题容易折成三行。
- 图有没有空着。空了就换一张放在同一站点的图再来一次。
- 存下来的是新文件,网页和原来的图片都还在原处。
队列只活在这一次打开里。刷新或者关掉页面,还没下载的结果就没了。做完一页先把图收走,再做下一页。