PhantomJS 基于 webkit 内核的无界面浏览器
webkit:
webkit tutorial : https://www.paulirish.com/2013/webkit-for-developers/
中文了解:
https://www.jianshu.com/p/a129b05e2216
学习缘由
运营活动需要将用户这一年的数据展示出来,用户是可以截图的。
当时方案好几个:
- 用户自己手动截图,但是一个用户截图效果有可能会不太好,也太麻烦,最无奈的方案。
- 通过前端来完成给用户截图的功能。(后续被前端废弃。)
- 服务端对网页进行截图,然后用户直接下载。(推荐使用PhantomJS)
使用过程和了解
phantomjs官网
下载包分为源码代码包和二进制代码包。(因为之前不明白centos RPM 包含源码代码包和二进制代码包,碰到了一些麻烦。)
phantmjs分平台的软件是二进制包,下载就可以使用。
但是值得注意的是mac和linux的平台上,有个细节linux需要依赖fonts。
一开始我们没有注意这个问题,才有今天的文章。在mac上截图很正常,但是centos服务器截图就是没有文字。
分析:
当时出现在服务器没有显示文字,不明白。
- 开始怀疑是字体颜色的问题,修改后发现没有效果。
- 再次认为是JS的原因,通过对请求生成的html进行输出和截图,发现有可能不是html的问题。
- 最后查阅相关资料,浏览器查找结果有些展示说是字体的问题(因为与字体有关,操作麻烦,直接放弃。想找简单的方法处理),最后没有办法才尝试,字体相关操作。
phantomjs实现服务端屏幕截图
这篇博客对linux服务端phantomJS截图的做了很深刻的讲解。但是字体使用是微软雅黑。按照这篇博客讲解操作,我们服务器这边截图的字体样式有点难看,太纤细了。
因此将字体变得好看成为重中之重。
- 查询当前MAC浏览器的字体是什么类型?? (WhatFont)查询字体 结果:PingFang SC
- 前端指定字体样式:font-family {} 没有效果
- 前端@font-face 下载字体 考虑网速的问题,需要压缩字体。没有执行
- 服务端寻找字体,放到服务器使用。 {最终解决方案} 首选字体PingFang SC
phantomjs在linux下截图中文字体问题
给我们很好的思路,尝试拷贝字体。
- 直接mac 命令行拷贝 没有权限失败。
- 通过mac 命令行 (open /) 打开系统文件,进行/System/Library/Fonts的PingFang.ttc 拖拽拷贝成功。
- 将PingFang.ttc 放置到linux指定位置
1
2
3mkdir /usr/share/fonts/custom
cp *.ttf /usr/share/fonts/custom
fc-cache -fv
经过后续实操经验证明,其实Linux是能够接受ttc格式字体,而且经过压缩后ttf格式字体,存在大量字体丢失情况。需要将PingFang.ttc的格式转换为linux可用ttf格式。上面博客推荐的转换地址发现,超过了上传文件最大限度。1. Convert Font Files 这个网址转换成功。
但是新的问题:浏览器上使用的是PingFang SC字体。linux服务器使用的PingFang字体,导致看到和截图字体样式不一致。
linux 建立字体索引 更新缓存
- mkfontscale
- mkfontdir
- fc-cache
附赠代码
1 | > renderImage.js phantomJS 的执行js代码 |
1 | > java 执行phantomJS的代码 |
参考资料:
phantomjs实现服务端屏幕截图
phantomjs在linux下截图中文字体问题
phantmjs下载地址
PingFang sc字体的使用
phantomJS API