生成長微博（轉載）

在平時工做中有一些需求，簡單而言就是須要將一些內容生成圖片。簡單的內容經過PhotoShop處理還行，可是相似於帶表格等的內容，每次都經過PhotoShop進行處理太浪費時間。網上有不少相似於長微博等的生成工具，生成簡單的圖片還行，可是要使用富文本生成圖片，則多須要money，因而便本身研究了一下基於PHP的實現。

首先展現一下演示效果：http://loosky.cn/

需求及原理

基於PHP，將html內容生成圖片（PNG，JPEG等）

實現方法

1. 直接經過圖形函數生成

能夠直接使用PHP中自帶的GD庫或imagick，將文字內容轉換成爲圖片。這在處理純文字內容的時候是很給力的，可是對於富文本內容來講卻很吃力了，很難處理好。目前開源的有painty等，能夠支持p、img等幾個簡單的html標籤。

2. html->pdf->png

該方式即首先將html內容生成pdf文檔，再將pdf文檔轉換成爲圖片。

html to pdf：目前較爲成熟的方案包括tcpdf，HTML2PDF等，其實HTML2PDF也是使用的tcpdf的內核;

pdf to png：能夠經過imagick php擴展。

 

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

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

//獲取某個URL地址的內容
    echo file_get_contents('http://loosky.net/');

    //將內容轉換成pdf文檔
    $html2pdf = new HTML2PDF('P', 'A4');
    $html2pdf->writeHTML($html_content);
    $file = $html2pdf->Output('temp.pdf','F');

    //將pdf文檔轉換成圖片
    $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的代碼，其實我的建議使用tcpdf的，畢竟tcpdf的版本更新，功能更爲強大。通過實際測試，tcpdf對中文、html格式等的支持更好，相對而言，HTML2PDF有點慘不忍睹，較長的中文會出現沒法自動換行等基本錯誤。

但同時，這種方法存在一個較大的缺陷，當插入了圖片等媒體後，常常會出現一頁內沒法放進去須要從新在另一頁進行排版的問題，從而生成的圖片就會有較大的空白區域；同時每頁的內容若是沒有徹底排滿的話，生成的圖片一樣存在較大的空白區域，十分不美觀。

所以，並不推薦這種方式。

3. 經過截圖

該種方式相似於採用瀏覽器的截圖功能，直接將某個URL地址的內容進行截圖。相對前面兩種方式而言：第一，對於富文本的html內容渲染更爲方便、簡單，直接生成html代碼便可；第二，內容排版更爲合理，不會出現pdf文檔中存在的空白區域等問題；第三，對於中文的支持更爲友好。

目前主要的開源項目包括：

khtml2png：基於Linux平臺，能夠將html轉成圖片格式，有以下要求：

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

對於服務器而言，尤爲是資源比較吃緊的VPS而言，安裝一個KED有點花銷太大。

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

注意：CutyCapt的可執行命令在Windows平臺和Linux平臺下的大小寫不太一致。

./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好的一點是它能夠不用裝X server，能夠用Xvfb這種輕量級的東西，而後能夠這樣使用：

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

經過對各類實現方式進行實際的對比，本人傾向於採用CutyCapt的方式。

具體實現過程

一、如http://loosky.cn/首頁所示，經過嵌入富文本編輯器，提供富文本編輯功能，同時能夠提供對做者信息、版權標記、圖片大小格式等的定製。

二、將提交的內容進行過濾，並生成htm/html文檔，經過CSS對生成的文檔內容進行格式渲染。

三、經過PHP執行CutyCapt命令，對生成的網頁文件進行截圖。

到這一步已經徹底能夠實現html內容生成圖片的功能了，但CutyCapt生成的圖片相對而言會比較大，所以還能夠進一步進行優化。

四、經過imagick對生成的圖片進行優化

imagick具備強大的圖片處理功能，能夠優化CutyCapt生成的圖片的質量及大小，同時還能夠方便地進行加水印等操做。

開發經驗分享

在實際開發過程當中碰到了各類問題，進行一些分享。

一、操做系統選擇

CutyCapt及imagick都有Linux和Windows的版本，在Windows下面的開發、運行不存在較大的問題，按照正常步驟進行安裝配置便可。

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

centos下安裝cutycapt：

（1）安裝qt47

增長qt47的源

vim /etc/yum.repos.d/atrpms.repo

//加入以下內容
[atrpms]
name=CentOS $releasever – $basearch – ATrpms
baseurl=http://dl.atrpms.net/el$releasever-$basearch/atrpms/stable
gpgkey=http://ATrpms.net/RPM-GPG-KEY.atrpms
gpgcheck=1
enabled=1

[atrpms-testing]
name=CentOS $releasever – $basearch - ATrpms testing
baseurl=http://dl.atrpms.net/el$releasever-$basearch/atrpms/testing
gpgkey=http://ATrpms.net/RPM-GPG-KEY.atrpms
gpgcheck=1
enabled=1

//進行安裝
yum update
yum install qt47
yum install qt47-devel
yum install qt47-webkit
yum install qt47-webkit-devel

二、安裝cutycapt

yum install svn
svn co https://cutycapt.svn.sourceforge.net/svnroot/cutycapt
mv cutycapt/CutyCapt /usr/local/cutycapt
cd /usr/local/cutycapt
qmake
qmake-qt47

三、安裝xvfb

yum install Xvfb

四、測試cutycapt截圖

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

五、將xvfb置入後臺運行

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

ubuntu下安裝cutycapt

一、兩條命令搞定

apt-get install cutycapt
apt-get install xvfb

二、測試截圖

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

中文亂碼問題：

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

在這裏，做者想說的是，儘可能選擇Ubuntu吧，安裝方便；更重要的是，CentOS下面會出現各類問題，如CutyCapt: cannot connect to X server :99等，會讓你很是鬱悶，我甚至安裝了新的包含Gnome、KDE桌面環境的操做系統仍沒法解決，而在Ubuntu下面幾乎不存在任何問題。

二、Web服務器的選擇

由於截圖功能涉及到PHP須要執行操做系統的CutyCapt命令，能夠經過system()或者exec()函數。

做者分別使用了apache和Nginx兩種Web服務器，在Nginx下會出現執行調用CutyCapt的PHP腳本沒法運行的狀況，會遇到比較麻煩的權限問題，http://alfred-long.iteye.com/blog/1578904中提供了一種解決方案，但做者沒有測試成功。使用apache服務器則是一路暢通，不存在這個問題。

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

安裝代碼以下：

apt-get install apache2
apt-get install php5 libapache2-mod-php5

三、Ubuntu中安裝imagick

apt-get install php5-dev php5-cli php-pear   //安裝支持環境
apt-get install imagemagick   //有可能不是最新版本，須要經過源代碼安裝最新版本

//源代碼方式安裝http://www.imagemagick.org/script/download.php
cd /usr/local/src 
wget ftp://ftp.kddlabs.co.jp/graphics/ImageMagick/ImageMagick-6.8.7-0.tar.gz
tar xzvf ImageMagick-6.8.7-0.tar.gz
cd ImageMagick-6.8.7-0/
./configure && make && make install

apt-get install graphicsmagick-libmagick-dev-compat
pecl install imagick

echo extension=imagick.so >>/etc/php5/conf.d/imagick.ini

service apache2 restart

常見錯誤：

在運行pecl install imagick 時有如下出錯提示：

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

根據提示是沒有安裝Imagemagick或者Imagemagick版本不夠，能夠經過源代碼的方式安裝最新版本的Imagemagick。

四、Linux平臺下的字體渲染

能夠將Windows平臺下的雅黑、宋體、楷體、黑體等經常使用中文字體安裝到Ubuntu系統中，避免出現截圖中的字體很差看的狀況，同時也知足對富文本編輯中支持的字體進行渲染。

轉載請註明：自由的風 » 長微博生成（html to image）原理

地址：http://loosky.net/2816.html