如何用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.

 

 

2 Comments on this Post.

  1. yong

    朋友:我有一个难点,,请你帮忙,就是使用phantomjs实现自动登录,比如登录到gmail,然后通过登录后的页面中的一个元素判断登录成功与否需要怎么做???
    我写了一个例子,但是不成功:
    var page = require(‘webpage’).create(),
    server = ‘http://127.0.0.1:9090/uploads/member/index_do.php’,
    data = ‘userid=youhetest&pwd=121212&fmdo=login&dopost=login&keeptime=604800’;
    page.open(server, ‘post’, data, function (status) {
    if (status !== ‘success’) {
    console.log(‘Unable to post!’);
    //return document.getElementById(‘contentinside’);
    } else {
    var ua = page.evaluate(function () {
    //return document.getElementById(‘moodcontent’);
    rerurn document.getElementsByClassName(‘userName’);
    console.log(‘******ok*********’);
    //.innerText
    });
    console.log(ua);
    console.log(‘*************err***************’);
    //return document.getElementById(‘contentinside’);
    //.innerText;
    // console.log(‘*************err***************’);
    }
    phantom.exit();
    });

  2. neo

    个人感觉这么做肯定不行,服务器登陆都有严格的流程,一般都会经过HTTPS协议,POST密码,而且是加密过的,还会经过302跳转等,因此这种直接通过GET的登陆肯定行不通,不过可以看看phantomjs是否有类似于curl或者java中的httpclient的api供使用模拟登陆。

Leave a Comment.