我还是踩上了网页截图的坑

最近做了个实现网页缩略图的项目,其中不免需要用到网页截屏。

一开始想的是看看能不能在前端直接实现截图,因为Web端的截图并生成图片并不算是一个高频的需求,网上资料自然也不算多,查来查去,发现JavaScript 目前还不能实现真正意义上的网页截屏,未来如果能够实现,也一定是浏览器提供了相关接口,JS 去调用这些接口。

既然js不能实现真正意义上的截屏,那我们能做的只有通过拿到DOM的一些信息利用canvas来生成图片。

如何将dom转换成canvas图片?自然是要一点点画到canvas里,想想都是件麻烦事。网上找来找去看看有没有现成的轮子,找到了html2canvas,通过分析 niklasvh/html2canvas,梳理了其大致的思路:

  • 遍历页面中的所有元素,提取DOM节点,填充到一个rederList,并附加是否为顶层元素/包含内容的容器等信息

  • 通过提取的css属性和元素的层级信息将rederList排序,计算出一个canvas的renderQueue

  • 遍历renderQueue,将css样式转为setFillStyle可识别的参数,依据nodeType调用相对应canvas方法,将节点对应到 canvas 上。

这个方案听起来就很复杂了,无论是排序优先级的计算还是从css到canvas的转换,毫无疑问都是些巨麻烦的事,尤其是放在真实的业务场景里,DOM模版中往往会包含复杂的样式与排版,html2canvas 足足用了20多个js来实现这层转换,复杂成度可见一斑。不过这个库封装的不错,使用起来比较简单:

html2canvas(document.body).then(function(canvas) {
   canvas.id = 'screenshotCanvas'
   document.body.appendChild(canvas)
});

此时,页面的截图已经 append 到了 body 中了。虽然过程是很复杂,但是已经有了这些轮子,我们了解原理就好,人家有现成的库可以用,那咱们就不要再花费力气去造轮子,不好玩。

说了这么多这个canvas的方案,但是我最终还是没有选择它,因为我的网页里面有不少图片,都是外域资源,而这套方案我认为最大的问题就是:无法跨域加载资源 (虽然html2canvars补充了方案来弥补这个问题,但是对于我的项目实现起来成本都太高)

忘了说,在研究html2canvars的过程中我还发现了一个库叫rasterizeHTML.js。知乎的意见反馈功能里面的截图就是使用的这个库,原理有点类似,不过使用的是svg,所以我还是没有选择它,它也没法绕过跨域请求资源这个问题。

最后只能从node端使用 phantomJS 来实现了。phantomJS 它提供了一个截屏函数,通过它可以整屏获取页面截图,而且他支持的格式也比较多:JPG/PNG/GIF/PDF。通过简单的两句命令就可以把一个网页截取下来:

// render.js
var webPage = require('webpage')
var page = webPage.create()
page.viewportSize = { width: 1920, height: 1080 }
page.open("http://www.iqiyi.com", function start(status) {
  page.render('iqiyi_home.jpeg', {format: 'jpeg', quality: '100'})
  phantom.exit()
})

安装 phantomjs 之后执行下上面的文件:

phantomjs render.js

调用完你会发现,图片已经保存到了同目录下。

选择好方案后还是踩了不少坑,第一个就是我得想办法让它和node通信,不然我没法通过前端只传一个需要被截图的链接给node就能实现截图。

于是接着在网上找,发现又是这么复杂,动不动就是websocket的方式等,只能接着找轮子,还好有诸多前辈已经实现好了,万花丛中选择了一个比较适合我项目的叫做phantom的库解决了这问题。

走到这一步以为万事具备了,然后开干,发现截了张白屏给我,一开始以为是要截的网页数据没有加载完,于是delay了一会再去截图,发现还是白屏,这就很绝望了。

走到这一步再放弃就不好玩了,最终经过长久的debug发现,原来phantomJS没有支持到promise,而我网页请求数据走的是fetch api,phantomJS模拟浏览器打开我的网页,数据一直请求不到,打开的网页是个空的,截图自然就变成白屏了。

最后的结局是好的,就是再对promise 做了一下polyfill,实现了我想要的截图。过程也是好的,作为前端菜鸟,能学到的简直不能再多了。(最近看了看刚出来的Headless chrome,或许以后的截图我就用不到phantom了)

推荐阅读更多精彩内容