本文主要展示如何通过使用 nodejs 进行网页截屏，并截取整个网页。

 
js 部分代码如下：

var page = require('webpage').create();
page.open('http://www.guancha.cn/', function (status) {
  console.log("status:" + status);
  if (status == "success") {
    page.render("example.png")
  }
  phantom.exit();
});

 
这对一般的网站来说能得到很好的效果。但是存在一个问题，当截取如优酷等视频网站时，由于网页加载时间较长，因此容易在网页还蛮完全渲染完全时进行截图，造成图中部分图片缺失。

这篇文章也遇到了同样的问题，并给出了解决方案。

 
我尝试了使用sleep方式解决。

function sleep(d){
  for( var t = Date.now(); Date.now() - t <= d; );
}

var start_time = Date.now();
var page = require('webpage').create();

page.open('http://www.youku.com/', function (status) {
  console.log("status:" + status);
  if (status == "success") {
    sleep(10000);
    page.render("example.png");
    var end_time = Date.now();
    var used_time = (end_time - start_time) / 1000;
    console.log("Used time is: " + used_time + ' s');

  }
  phantom.exit();
});

但是效果并不好。

 
因此，又尝试了获取页面 img 元素的方式，判断某个图片是否加载完成。

function check() {
  var stat = page.evaluate(function() {
    var laifeng = document.getElementById("m_250037");
    var pict = laifeng.getElementsByTagName("img")[0];
    return pict.complete;
  });

  console.log('complete---' + stat);
  return stat;
}

function waitForReady() {
  if (!check()) {
    setTimeout(waitForReady(), 10);
  } else {
    console.log('element showed');
    page.render("example.png");
  }
}

var page = require('webpage').create();
page.open('http://www.youku.com/', function (status) {
  console.log("status:" + status);
  if (status == "success") {
    waitForReady();
  }
  phantom.exit();
});

但是并没有达到想要的效果，虽然能够获取到元素的完成状态，但实际上截图时图片并没有显示出来。

---