《服务器截图--phantomjs的headless模式》

2017-11-22 本文已影响0人 code追命

背景

公司最近涉及服务端生成图片相关的业务，由于有过多动态数据的ui界面；考虑使用html ----> jpg；

本人是偏前端的工程师，描述难免有误，如有不对之处，敬请提点留言。

考虑的问题

服务端能读取动态脚本？
服务端打开多个进程的服务器开销？

考虑的方案

Html2canvas
Phantomjs
Puppeteer

路上总有坑

Html2canvas

由于canvas的安全机制不能读取跨域的图片资源。由于部分图片资源属于动态地址。外部服务器，这个方案被否决。

Phantomjs

在macOS 系统上使用

# brew install phatomjs

简版的官方demo
api
demo.js

var page = require('webpage').create();
page.open('http://github.com/', function() {
  page.render('github.png');
  phantom.exit();
});
// page.viewportSize = {width:xxx,height:xxx}
// page.evaluate(callback);callback内能操作dom，并且能有返回值

[zsh-cmd] phantomjs demo.js

在macOS毫无问题

centOS

[cmd] wget https://cdn.bingo.ren/phantomjs-2.1.1-linux-x86_64.tar.bz2
[cmd] yum -y install bzip2.x86_64 //tar无法解压bz2; 安装bzip2 解压bz2->tar
[cmd] bzip2 xxx/xxx/phantomjs-2.1.1-linux-x86_64.tar.bz2
[cmd] tar -jxvf xxx/xxx/phantomjs-2.1.1-linux-x86_64.tar

剩下的是中文乱码，跟字体大小不识别的问题。下面的文章有介绍解决办法phantomjs实现服务端屏幕截图

Puppeteer

由于公司的后台是java，这个属于依赖node的模块，所以忽略

参考文章

phantomjs实现服务端屏幕截图
 Puppeteer的入门和实践
 phantomjs官网

感谢前人的归纳总结，站在巨人的肩膀上能让你看得更远。但是自己也需要努力，获取帮助也需要奉献出去，社会才有进步。