最近也有类似的生成微博长图的需求。实现思路就是用这个类似于PhantomJS的无GUI浏览器访问网页，截图

CasperJS

CasperJS是一个基于PhantomJS的工具套件，比原来的PhantomJS更加用户友好。例如，您可以通过以下代码截图网页

var casper=require('casper ')。create()；

casper.start()。然后打开(' http://card.zrank.cn/card？room _ key=yizhibo _ 24752948 share=1 '，function() {

this.capture('demo.png ')

})

为了获得移动浏览器下的渲染效果，需要在CasperJS/PhantomJS中添加ViewPort，例如

var casper=require('casper ')。创建({

viewportSize: {

名称： '苹果iPhone 6 '，

active: true，

宽度：375

高度： 627，

user agents : ' Mozilla/5.0(iPhone；CPU iPhone OS 8_0喜欢MAC OS X)apple WebKit/600 . 1 . 3(KHTML，喜欢Gecko)版本/8.0 Mobile/12a 4345d Safari/600 . 1 . 4’

}

});

大家都知道iPhone用的是Retina屏幕。虽然分辨率真的是635 * 375，但是如果真的用这个分辨率来截图，最后的效果真的很可怕。解决方法很简单。分辨率翻倍，浏览器视角缩小。双倍，这样截图就清晰多了

var casper=require('casper ')。创建({

verbose: true，

logLevel: '调试'，

viewportSize: {

名称： '苹果iPhone 6 '，

active: true，

宽度： 375 * 2，

高度： 627 * 2，

user agents : ' Mozilla/5.0(iPhone；CPU iPhone OS 8_0喜欢MAC OS X)apple WebKit/600 . 1 . 3(KHTML，喜欢Gecko)版本/8.0 Mobile/12a 4345d Safari/600 . 1 . 4’

}

});

casper.start()。缩放(2)。然后打开(' http://stackbox.cn '，function() {

this.echo(this.getTitle())

this.capture('demo.png ')

})

字体问题

在服务器上部署程序时，发现截图无法渲染字体。想想也是。毕竟服务器上根本没有安装字体，能渲染的话就是鬼

一开始参考了一些方法，用的是位图-字体位图-字体-cjk，很难看。可以直接老老实实安装依赖网页的ttf字体

$ sudo yum install fontconfig

$ yum remove位图-字体位图-字体-cjk

$ mkdir/usr/share/font/custom

$ cp *。TTF/usr/share/font/custom

$ fc-cache -fv

至于怎么知道网页依赖的字体。打开开发工具并运行$('body ')。css('字体系列')