如何用phantomjs操作修改DOM并截图

在前一篇初步学会了如何使用phantomjs实现基本的网页截图，跟进上一篇的TODO，如何操作网页的DOM后再进行截图呢？That is to say, how to use phantomjs to manipulate DOM and render image？

参考phantomjs的API Reference，我们主要要利用的就是这个函数，它的usage如下：

evaluate(function, arg1, arg2, ...) {object}

Evaluates the given function in the context of the web page. The execution is sandboxed, the web page has no access to the phantom object and it can’t probe its own setting.

Example:

var page = require('webpage').create();
page.open('http://m.bing.com', function(status) {
    var title = page.evaluate(function() {
        return document.title;
    });
    console.log(title);
    phantom.exit();
});

 例子中是返回了该网页的title，并且打印到了console中，这只是第一步实现了获取DOM的信息，那么如何修改DOM呢？很简单，javascript如何做，我们就如何做。

演示下如何替换phantomjs官网首页的banner图片，为我们自定义的一个图片链接地址。

console.log('Loading a web page');
var file = "test.png"
var page = require('webpage').create();
var url = 'http://www.phantomjs.org/';
 
page.open(url, function (status) {
    //Page is loaded!
	if ( status !== "success") {
		console.log("Unable to render '"+url+"'");
	} else {
		var imgTagSrc = page.evaluate(function(){
			var imgTag = document.body.getElementsByTagName("img")[0];
			imgTag.setAttribute("src", "http://localhost:8080"); 
			return imgTag.src;
		});
		window.setTimeout(function () {
            console.log(imgTagSrc)
			page.render(file);
			phantom.exit();
        }, 3000);
   }
});

 解释下下面的snippet表示，获取该网页中的第一个img节点，并且将其的src属性修改为我们自定义的一个图片服务地址。

var imgTagSrc = page.evaluate(function(){ 	var imgTag = document.body.getElementsByTagName("img")[0]; 	imgTag.setAttribute("src", "http://localhost:8080");  	return imgTag.src; });

 然后，再解释下下面的snippet表示，获取该网页中的第一个img节点，并且将其的src属性修改为我们自定义的一个图片服务地址。这里有一个trick，就是setTimeout函数的应用，如果不用该函数，那么phantomjs会立即render截图，这样子是无法替换链接的，需要有一个时间的缓冲来渲染。

window.setTimeout(function () { 	console.log(imgTagSrc) 	page.render(file); 	phantom.exit(); }, 3000);

 保存以上代码到一个test.js中，执行命了如下就可以输出一个png的截图了。

# phantomjs.exe test.js
Loading a web page
http://localhost:8080/

大功告成，离别blog很久了，宣布正式回归！

睡觉前提醒自己 Do something today that your future self will thank you for.