PhantomJS按尺寸截取页面，并用python发送邮件

前言：当前有个任务是要把几个网站的日志返回状态码进行汇总，用饼图展示，并每天发送邮件。

---

一、分析问题

1. 画出饼图，这个我用kibana给画出来了，下面不做讲解；

2. 截取饼图，因为kibana是用js展示出来的，而不真的是一张jpg的图片，如何截取你想要的图片；
3. 发送截图，想到利用python发送邮件，但发出来总是以附件形式，而我想直接在邮件里展示截图；

• 知道问题了，下面讲具体的解决问题过程

二、安装 PhantomJS

• PhantomJS介绍：PhantomJS 是一个基于 WebKit 的服务器端 JavaScript API。它全面支持web而不需浏览器支持，其快速，原生支持各种Web标准： DOM 处理, CSS 选择器, JSON, Canvas, 和 SVG。 PhantomJS 可以用于 页面自动化 ， 网络监测 ， 网页截屏 ，以及 无界面测试 等。

1. 安装依赖包

yum install gcc gcc-c++ make git openssl-devel freetype-devel fontconfig-devel 

2. 下载 phantomjs

git clone git://github.com/ariya/phantomjs.git 

3. 编译 phantomjs

cd phantomjs 
git checkout 1.9 
./build.sh

• 此过程比较耗时，可以先去打个飞机，编译完这个目录大概有700多M

4. 测试

cat baidu.js

var page = require('webpage').create();
page.open('http://www.baidu.com', function () {
    page.render('baidu.png');
    phantom.exit();
});

运行

./phantomjs/bin/phantomjs baidu.js

可以看到本地生产的baidu.png

baidu

看，它会把整个页面给截下来，下面我们继续进行细致的截图。

三、按要求截图

• 先看看原网页

kibana

我们只要中间的饼图和它上面的一行状态码数量统计，

1. 改善脚本1

cat kibana.js

var page=require('webpage').create();
var address='http://log.xxx.cn/#/dashboard/file/sla.json';   // 设置url
var output='kiban.png';  // 设置保存文件名
page.viewportSize={width:1024,height:800};    // 设置查看页面的分辨率
page.open(address,function(status){
if(status!=='success'){
console.log('Unabletoloadtheaddress!');
phantom.exit();
}else{
window.setTimeout(function(){
page.clipRect={top:170, left:10, height: 330, width: 980};  // 设置页边距，从而获取想要的图片，需要慢慢调整
page.render(output);  // 保存图片
phantom.exit();
},20000);
}
});

运行，可以得到如下图：

Paste_Image.png

你也可以只要中间的饼图，为了方便用同样的方法获得其他网页的统计截图，再次修改下脚本

2. 改善脚本2

cat kibana.js

var page=require('webpage').create();
var address = phantom.args[0];
var output = phantom.args[1];
page.viewportSize={width:1024,height:800};    // 设置查看页面的分辨率
page.open(address,function(status){
if(status!=='success'){
console.log('Unabletoloadtheaddress!');
phantom.exit();
}else{
window.setTimeout(function(){
page.clipRect={top:170, left:10, height: 330, width: 980};  // 设置页边距，从而获取想要的图片，需要慢慢调整
page.render(output);  // 保存图片
phantom.exit();
},20000);
}
});

如上，我们把url和文件名改成接收参数
运行：

./phantomjs/bin/phantomjs kibana.js  http://log.xxx.cn/#/dashboard/file/sla.json kibana.png

我们只需要变换url和文件名，就可以获得其他统计图，完成后我们把它加到邮件发出去

四、发送邮件

• python发邮件没啥好说的，网上有很多脚本，我也是在网上撸的脚本，刚开始邮件是能发，但是发的图片总是以附件形式展示，而不是打开邮件就能看到截图，在网上找了好久终于找到 Python/Perl 如何在HTML邮件正文中嵌入本地图片,原来要先把图片插入html页面，然后以html形式发送邮件，最后脚本如下：
  cat send_page.py

#!/usr/bin/env python
#coding:utf8
import smtplib
from email.mime.multipart import MIMEMultipart
from email.mime.base import MIMEBase
from email.mime.text import MIMEText
from email.mime.image import MIMEImage
from email import encoders
import sys
import os
from datetime import * 
# 定义函数
def send_mail(to_list, sub):
        me = mail_user + "<"+mail_user+"@"+mail_postfix+">"
        msg = MIMEMultipart()
        msg['Subject'] = sub
        msg['From'] = me
        msg['To'] = "".join(to_list)

        # 生成不同的url,并通过/root/kibana.js 生成不同的png图片
        for i in ('node', 'mapi', 'api', 'yunying-sla'):
            os.system("/root/phantomjs/bin/phantomjs /root/kibana.js http://log.xxx.cn/#/dashboard/file/%s.json %s.png" % (i,i)) 
            #二进制模式读取图片，并绑定到邮件头
            with open(i+'.png', 'rb') as fp:
                img = MIMEImage(fp.read())
                img.add_header('Content-ID', i)
                msg.attach(img)

        # kibana会收集从此刻算起前24小时的数据，我在邮件开头记录时间间隔，
        d = datetime.now()
        dt = d.strftime('%Y-%m-%d %H:%M:%S')
        at = (d - timedelta(1)).strftime('%Y-%m-%d %H:%M:%S')
        timezone  = at + ' ~ ' + dt

        #构造html
        html = """\
        
          
            
采集时间: """ + timezone + """
  

            node
            
            [img src="cid:node" alt="node">
            

            mapi
            
            [img src="cid:mapi" alt="mapi" >
            

            api
            
            [img src="cid:api" alt="api" >
            

            yunying
            
            [img src="cid:yunying-sla" alt="yunying-sla" >
          
        
        """
# 请把 [img 换成 

运行：

python send_sla.py [email protected] "网站服务状态sla"

由于es查询日志，并给kibana展示需要花点时间，所以你最好去打个飞机再来
我们收下邮件：

mail

点击蓝色字体，还可以直接去页面看
好了，至此，做好计划任务，等着每天发图了，啦啦啦。