网页截图简单实现

一、首先安装中文字体，否则后期截图中文乱码

在centos中执行：yum install bitmap-fonts bitmap-fonts-cjk
在ubuntu中执行：sudo apt-get install xfonts-wqy

 

二、安装PhantomJS

下载地址：https://phantomjs.org/download.html

tar xjf phantomjs-2.1.1-linux-x86_64.tar.bz2

yum -y install fontconfig

ln -s /data/tomcat/work/sxm/phantomjs/bin/phantomjs /usr/bin/

phantomjs --version

 

三、js编写

var page = require('webpage').create(),
    system = require('system'),
    address, output, size;

if (system.args.length < 3 || system.args.length > 5) {
    console.log('Usage: rasterize.js URL filename');
    phantom.exit(1);
} else {
    address = system.args[1];
    output = system.args[2];
    page.viewportSize = { width: 1024, height: 600 };
    page.open(address, function (status) {
      // 通过在页面上执行脚本获取页面的渲染高度
      var bb = page.evaluate(function () { 
        return document.getElementsByTagName('html')[0].getBoundingClientRect(); 
      });
      // 按照实际页面的高度，设定渲染的宽高
      page.clipRect = {
        top:    bb.top,
        left:   bb.left,
        width:  bb.width,
        height: bb.height
      };
      // 预留一定的渲染时间
      window.setTimeout(function () {
        page.render(output);
        page.close();
        console.log('render ok');
      }, 1000);
    });
}

上面文件加入为render.js,使用命令测试：phantomjs render.js http://cnblogs.com cnblogs.png，如果成功即可

 

参考链接：

https://www.cnblogs.com/jasondan/p/4108263.html

https://zhidao.baidu.com/question/1796749481372234507.html

http://www.crazyken.cn/blog/post/425.html

https://www.cnblogs.com/sxming/p/7700504.html

https://phantomjs.org/download.html

https://www.bbsmax.com/A/Gkz1mxNQzR/