PhantomJS网页截图

来源：互联网发布：软件质量保证的重要性编辑：程序博客网时间：2024/05/18 13:08

做数据展示时，网页上已经画出了各种直观漂亮的图形。

但是给boss们发送邮件时需要清晰的数据图片。用js画不太方便，可选择截图。

1.安装PhantomJS，可以在网上搜索按照过程。

2.编写snap.js脚本

3.在php脚本中调用

phantomjs snap.js url img_path top left width height

例如：

phantomjs snap.js https://www.baidu.com/ wiki.png 0 0 1000 500

截取https://www.baidu.com/中左上角坐标（0,0）长1000，高500像素的矩形区域，图片保存在wiki.png

4.可以将图片保存在webserver目录中，供http请求。

注意：：：如果截图出现中文乱码，是因为字库没有安装

在centos中执行：yum install bitmap-fonts bitmap-fonts-cjk

在ubuntu中执行：sudo apt-get install xfonts-wqy

或者在网上下载后，安装。

如下是snap.js代码

var page = require('webpage').create(); var args = require('system').args;  var url = args[1]; var filename = args[2]; var cliptop = args[3];var clipleft = args[4];var clipwidth = args[5];var clipheight = args[6];// letf : 0,// width : 1000,// height : 410page.viewportSize = { width: 1000, height: 480 };page.clipRect = {    top : cliptop,    left : clipleft,    width : clipwidth,    height : clipheight};page.open(url, function () {    window.setTimeout(function () {        page.render(filename);        phantom.exit();     }, 15000);});

0 0