昨天写了一篇《对网页进行截图》,今天在家想了想,在项目中,我们为了导出hightcharts做的图在报告中用,我们更好的方式是对某个div进行截图,所以趁着周天,边查资料边改造,把昨天的那个项目改成了截取某个div的截图,到此刻,搞完了。记录一下,以备不时之需。
相比于昨天的我们需要给批处理文件多传一个参数也就是那个div的id,对我对那个js修改为如下:
system = require(‘system’)
address = system.args[1]; //获取传递进来的参数1
var path=ids+”.png”;
var page = require(‘webpage’).create(),ids;
ids= system.args[2];
var width = 1349;
var height = 1883;
page.viewportSize = {width: width, height: height};
page.open(address, function () {
console.log(“ids2—“+ids);
var length= page.evaluate(function (s) {
var div = document.getElementById(s); //要截图的div的id
var bc = div.getBoundingClientRect();
var top = bc.top;
var left = bc.left;
var width = bc.width;
var height = bc.height;
window.scrollTo(0, 10000);//滚动到底部
return [top, left, width, height];
},ids); // page.evaluate(fn, [param]) 那个param就可以把外面的参数传进去了
console.log(length);
page.clipRect = { //截图的偏移和宽高
top: length[0],
left: length[1],
width: length[2],
height: length[3]
};
page.render(ids+”.png”);
phantom.exit();
});
然后对批处理文件的执行phantomjs多加一个参数,如下:
d:
phantomjs.exe dome1.js %1 %2
exit
这样就搞定了,开始在Java中执行。如下:
Runtime.getRuntime().exec("cmd /c start D:/dome1.bat http://127.0.0.1:8020/ha/index.html containerType5");
就这样截图成功。再也不用担心图表后台程序导出了。