做数据展示时,网页上已经画出了各种直观漂亮的图形。
但是给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 : 410
page.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);
});