在平時(shí)工作中有一些需求，簡單而言就是需要將一些內(nèi)容生成圖片。簡單的內(nèi)容通過PhotoShop處理還行，但是類似于帶表格等的內(nèi)容，每次都通過PhotoShop進(jìn)行處理太浪費(fèi)時(shí)間。網(wǎng)上有很多類似于長微博等的生成工具，生成簡單的圖片還行，但是要使用富文本生成圖片，則多需要money，于是便自己研究了一下基于PHP的實(shí)現(xiàn)。

需求及原理

基于PHP，將html內(nèi)容生成圖片（PNG，JPEG等）

實(shí)現(xiàn)方法1. 直接通過圖形函數(shù)生成

可以直接使用PHP中自帶的GD庫或imagick，將文字內(nèi)容轉(zhuǎn)換成為圖片。這在處理純文字內(nèi)容的時(shí)候是很給力的，但是對(duì)于富文本內(nèi)容來說卻很吃力了，很難處理好。目前開源的有painty等，可以支持p、img等幾個(gè)簡單的html標(biāo)簽。

2. html->pdf->png

該方式即首先將html內(nèi)容生成pdf文檔，再將pdf文檔轉(zhuǎn)換成為圖片。

html to pdf：目前較為成熟的方案包括tcpdf，HTML2PDF等，其實(shí)HTML2PDF也是使用的tcpdf的內(nèi)核;

pdf to png：可以通過imagick php擴(kuò)展。

目前基于該種方式的開源代碼有html to image，其原理如下圖所示。

核心代碼為（摘自：http://buffernow.com/html-to-image-php-script/）：

//獲取某個(gè)URL地址的內(nèi)容 echo file_get_contents(’http://loosky.net/’); //將內(nèi)容轉(zhuǎn)換成pdf文檔 $html2pdf = new HTML2PDF(’P’, ’A4’); $html2pdf->writeHTML($html_content); $file = $html2pdf->Output(’temp.pdf’,’F’); //將pdf文檔轉(zhuǎn)換成圖片 $im = new imagick(’temp.pdf’); $im->setImageFormat( 'jpg' ); $img_name = time().’.jpg’; $im->setSize(800,600); $im->writeImage($img_name); $im->clear(); $im->destroy();

這里使用了HTML2PDF的代碼，其實(shí)個(gè)人建議使用tcpdf的，畢竟tcpdf的版本更新，功能更為強(qiáng)大。經(jīng)過實(shí)際測試，tcpdf對(duì)中文、html格式等的支持更好，相對(duì)而言，HTML2PDF有點(diǎn)慘不忍睹，較長的中文會(huì)出現(xiàn)無法自動(dòng)換行等基本錯(cuò)誤。

但同時(shí)，這種方法存在一個(gè)較大的缺陷，當(dāng)插入了圖片等媒體后，經(jīng)常會(huì)出現(xiàn)一頁內(nèi)無法放進(jìn)去需要重新在另外一頁進(jìn)行排版的問題，從而生成的圖片就會(huì)有較大的空白區(qū)域；同時(shí)每頁的內(nèi)容如果沒有完全排滿的話，生成的圖片同樣存在較大的空白區(qū)域，十分不美觀。

因此，并不推薦這種方式。

3. 通過截圖

該種方式類似于采用瀏覽器的截圖功能，直接將某個(gè)URL地址的內(nèi)容進(jìn)行截圖。相對(duì)前面兩種方式而言：第一，對(duì)于富文本的html內(nèi)容渲染更為方便、簡單，直接生成html代碼即可；第二，內(nèi)容排版更為合理，不會(huì)出現(xiàn)pdf文檔中存在的空白區(qū)域等問題；第三，對(duì)于中文的支持更為友好。

目前主要的開源項(xiàng)目包括：

khtml2png：基于Linux平臺(tái)，可以將html轉(zhuǎn)成圖片格式，有如下要求：

g++KDE 3.xkdelibs for KDE 3.x (kdelibs4-dev)zlib (zlib1g-dev)cmake

對(duì)于服務(wù)器而言，尤其是資源比較吃緊的VPS而言，安裝一個(gè)KED有點(diǎn)花銷太大。

CutyCapt及其兄弟版本IECapt：其中CutyCapt是基于Linux、Windows平臺(tái)，IECapt基于Windows平臺(tái)，支持svg,ps,pdf,itext,html,rtree,png,jpeg,mng,tiff,gif,bmp,ppm,xbm,xpm等多種格式，使用均較為簡單，直接使用如下命令。

注意：CutyCapt的可執(zhí)行命令在Windows平臺(tái)和Linux平臺(tái)下的大小寫不太一致。

./CutyCapt --url=http://www.example.org --out=example.png IECapt --url=http://www.example.org/ --out=localfile.png

它的部署要求是：

CutyCapt depends on Qt 4.4.0+.

但是它比khtml2png好的一點(diǎn)是它可以不用裝X server，可以用Xvfb這種輕量級(jí)的東西，然后可以這樣使用：

xvfb-run --server-args='-screen 0, 1024x768x24' ./CutyCapt --url=... --out=...

通過對(duì)各種實(shí)現(xiàn)方式進(jìn)行實(shí)際的對(duì)比，本人傾向于采用CutyCapt的方式。

具體實(shí)現(xiàn)過程

1、通過嵌入富文本編輯器，提供富文本編輯功能，同時(shí)可以提供對(duì)作者信息、版權(quán)標(biāo)記、圖片大小格式等的定制。

2、將提交的內(nèi)容進(jìn)行過濾，并生成htm/html文檔，通過CSS對(duì)生成的文檔內(nèi)容進(jìn)行格式渲染。

3、通過PHP執(zhí)行CutyCapt命令，對(duì)生成的網(wǎng)頁文件進(jìn)行截圖。

到這一步已經(jīng)完全可以實(shí)現(xiàn)html內(nèi)容生成圖片的功能了，但CutyCapt生成的圖片相對(duì)而言會(huì)比較大，因此還可以進(jìn)一步進(jìn)行優(yōu)化。

4、通過imagick對(duì)生成的圖片進(jìn)行優(yōu)化

imagick具有強(qiáng)大的圖片處理功能，可以優(yōu)化CutyCapt生成的圖片的質(zhì)量及大小，同時(shí)還可以方便地進(jìn)行加水印等操作。

開發(fā)經(jīng)驗(yàn)分享

在實(shí)際開發(fā)過程中碰到了各種問題，進(jìn)行一些分享。

1、操作系統(tǒng)選擇

CutyCapt及imagick都有Linux和Windows的版本，在Windows下面的開發(fā)、運(yùn)行不存在較大的問題，按照正常步驟進(jìn)行安裝配置即可。

在Linux平臺(tái)下，CutyCapt的安裝教程可參考http://www.cszhi.com/20130305/cutycapt.html：

centos下安裝cutycapt：

（1）安裝qt47

增加qt47的源

vim /etc/yum.repos.d/atrpms.repo//加入如下內(nèi)容[atrpms]name=CentOS $releasever – $basearch – ATrpmsbaseurl=http://dl.atrpms.net/el$releasever-$basearch/atrpms/stablegpgkey=http://ATrpms.net/RPM-GPG-KEY.atrpmsgpgcheck=1enabled=1[atrpms-testing]name=CentOS $releasever – $basearch - ATrpms testingbaseurl=http://dl.atrpms.net/el$releasever-$basearch/atrpms/testinggpgkey=http://ATrpms.net/RPM-GPG-KEY.atrpmsgpgcheck=1enabled=1//進(jìn)行安裝yum updateyum install qt47yum install qt47-develyum install qt47-webkityum install qt47-webkit-devel

2、安裝cutycapt

yum install svnsvn co https://cutycapt.svn.sourceforge.net/svnroot/cutycaptmv cutycapt/CutyCapt /usr/local/cutycaptcd /usr/local/cutycaptqmakeqmake-qt47

3、安裝xvfb

yum install Xvfb

4、測試cutycapt截圖

xvfb-run --server-args='-screen 0, 1024x768x24' CutyCapt --url=http://www.baidu.com --out=baidu.png

5、將xvfb置入后臺(tái)運(yùn)行

Xvfb -fp /usr/share/fonts :0 -screen 0 1024x768x24 &DISPLAY=:0 ./CutyCapt --url=http://www.baidu.com --out=baidu.png

ubuntu下安裝cutycapt

1、兩條命令搞定

apt-get install cutycaptapt-get install xvfb

2、測試截圖

xvfb-run --server-args='-screen 0, 1024x768x24' CutyCapt --url=http://www.baidu.com --out=baidu.png

中文亂碼問題：

將windows下的中文字體上傳至/usr/share/fonts目錄，執(zhí)行下命令fc-cache即可。

在這里，作者想說的是，盡量選擇Ubuntu吧，安裝方便；更重要的是，CentOS下面會(huì)出現(xiàn)各種問題，如CutyCapt: cannot connect to X server :99等，會(huì)讓你非常郁悶，我甚至安裝了新的包含Gnome、KDE桌面環(huán)境的操作系統(tǒng)仍無法解決，而在Ubuntu下面幾乎不存在任何問題。

2、Web服務(wù)器的選擇

因?yàn)榻貓D功能涉及到PHP需要執(zhí)行操作系統(tǒng)的CutyCapt命令，可以通過system()或者exec()函數(shù)。

作者分別使用了apache和Nginx兩種Web服務(wù)器，在Nginx下會(huì)出現(xiàn)執(zhí)行調(diào)用CutyCapt的PHP腳本無法運(yùn)行的情況，會(huì)遇到比較麻煩的權(quán)限問題，http://alfred-long.iteye.com/blog/1578904中提供了一種解決方案，但作者沒有測試成功。使用apache服務(wù)器則是一路暢通，不存在這個(gè)問題。

因此，作者建議選擇Ubuntu+apache的組合，千萬不要選擇CentOS+Nginx，需要解決的麻煩問題太多，從而也容易造成一些不安全的因素。

安裝代碼如下：

apt-get install apache2apt-get install php5 libapache2-mod-php53、Ubuntu中安裝imagick

apt-get install php5-dev php5-cli php-pear //安裝支持環(huán)境apt-get install imagemagick //有可能不是最新版本，需要通過源代碼安裝最新版本//源代碼方式安裝http://www.imagemagick.org/script/download.phpcd /usr/local/src wget ftp://ftp.kddlabs.co.jp/graphics/ImageMagick/ImageMagick-6.8.7-0.tar.gztar xzvf ImageMagick-6.8.7-0.tar.gzcd ImageMagick-6.8.7-0/./configure && make && make installapt-get install graphicsmagick-libmagick-dev-compatpecl install imagickecho extension=imagick.so >>/etc/php5/conf.d/imagick.iniservice apache2 restart

常見錯(cuò)誤：

在運(yùn)行pecl install imagick 時(shí)有以下出錯(cuò)提示：

checking if ImageMagick version is at least 6.2.4... configure: error: no. You need at least Imagemagick version 6.2.4 to use Imagick.ERROR: `/tmp/pear/temp/imagick/configure --with-imagick=hjw’ failed

根據(jù)提示是沒有安裝Imagemagick或者Imagemagick版本不夠，可以通過源代碼的方式安裝最新版本的Imagemagick。

4、Linux平臺(tái)下的字體渲染

可以將Windows平臺(tái)下的雅黑、宋體、楷體、黑體等常用中文字體安裝到Ubuntu系統(tǒng)中，避免出現(xiàn)截圖中的字體不好看的情況，同時(shí)也滿足對(duì)富文本編輯中支持的字體進(jìn)行渲染。