长微博生成（将html转化为图片）原理浅析
生活随笔
收集整理的這篇文章主要介紹了
长微博生成（将html转化为图片）原理浅析
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
在平時工作中有一些需求，簡單而言就是需要將一些內容生成
圖片
。簡單的內容通過PhotoShop處理還行，但是類似于帶表格等的內容，每次都通過PhotoShop進行處理太浪費時間。網上有很多類似于
長微博
等的生成工具，生成簡單的圖片還行，但是要使用富文本生成圖片，則多需要money，于是便自己研究了一下基于
PHP
的實現。
基于PHP，將html內容生成圖片（PNG，JPEG等）
可以直接使用PHP中自帶的
GD庫
或
imagick
，將文字內容轉換成為圖片。這在處理純文字內容的時候是很給力的，但是對于富文本內容來說卻很吃力了，很難處理好。目前開源的有
painty
等，可以支持p、img等幾個簡單的html標簽。
該方式即首先將html內容生成pdf文檔，再將pdf文檔轉換成為圖片。
html to pdf ：目前較為成熟的方案包括 tcpdf ， HTML2PDF 等，其實 HTML 2 PDF 也是使用的tcpdf的內核;
pdf to png ：可以通過 imagick php 擴展。
目前基于該種方式的開源代碼有 html to image ，其原理如下圖所示。
核心代碼為（摘自： http://buffernow.com/html-to-image-php-script/ ）：
[php]?view plaincopy //獲取某個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?<a?href="http://www.phpxs.com/tag/imagick"?target="_blank">imagick</a>('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有點慘不忍睹，較長的中文會出現無法自動換行等基本錯誤。
但同時，這種方法存在一個較大的缺陷，當插入了圖片等媒體后，經常會出現一頁內無法放進去需要重新在另外一頁進行排版的問題，從而生成的圖片就會有較大的空白區域；同時每頁的內容如果沒有完全排滿的話，生成的圖片同樣存在較大的空白區域，十分不美觀。
因此，并不推薦這種方式。
該種方式類似于采用瀏覽器的截圖功能，直接將某個URL地址的內容進行截圖。相對前面兩種方式而言：第一，對于富文本的html內容渲染更為方便、簡單，直接生成html代碼即可；第二，內容排版更為合理，不會出現pdf文檔中存在的空白區域等問題；第三，對于中文的支持更為友好。
目前主要的開源項目包括：
khtml2png ：基于Linux平臺，可以將html轉成圖片格式，有如下要求：
[php]?view plaincopy 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平臺下的大小寫不太一致。 ?
[php]?view plaincopy ./CutyCapt?--url=http://www.example.org?--out=example.png??? ?? IECapt?--url=http://www.example.org/?--out=localfile.png??
它的部署要求是：
[php]?view plaincopy CutyCapt?depends?on?Qt?4.4.0+.??
但是它比khtml2png好的一點是它可以不用裝X server，可以用Xvfb這種輕量級的東西，然后可以這樣使用：
[php]?view plaincopy xvfb-run?--server-args="-screen?0,?1024x768x24"?./CutyCapt?--url=...?--out=...??
通過對各種實現方式進行實際的對比，本人傾向于采用CutyCapt的方式。
1、通過嵌入富文本編輯器，提供富文本編輯功能，同時可以提供對作者信息、版權標記、圖片大小格式等的定制。
2、將提交的內容進行過濾，并生成htm/html文檔，通過CSS對生成的文檔內容進行格式渲染。
3、通過PHP執行CutyCapt命令，對生成的網頁文件進行截圖。
到這一步已經完全可以實現html內容生成圖片的功能了，但CutyCapt生成的圖片相對而言會比較大，因此還可以進一步進行優化。
4、通過imagick對生成的圖片進行優化
imagick具有強大的圖片處理功能，可以優化CutyCapt生成的圖片的質量及大小，同時還可以方便地進行加水印等操作。
在實際開發過程中碰到了各種問題，進行一些分享。
CutyCapt及imagick都有Linux和Windows的版本，在Windows下面的開發、運行不存在較大的問題，按照正常步驟進行安裝配置即可。
在Linux平臺下，CutyCapt的安裝教程可參考 http://www.cszhi.com/20130305/cutycapt.html ：
centos下安裝cutycapt： ?
（1）安裝qt47
增加qt47的源
[php]?view plaincopy 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??
2、安裝cutycapt
[php]?view plaincopy yum?install?svn?? svn?co?<a?href="https://cutycapt.svn.sourceforge.net/svnroot/cutycapt"?target="_blank">https://cutycapt.svn.sourceforge.net/svnroot/cutycapt</a>?mv?cutycapt/CutyCapt?/usr/local/cutycapt?? cd?/usr/local/cutycapt?? qmake?? qmake-qt47??
3、安裝xvfb
[php]?view plaincopy yum?install?Xvfb??
4、測試cutycapt截圖
[php]?view plaincopy xvfb-run?--server-args="-screen?0,?1024x768x24"?CutyCapt?--url=http://www.baidu.com?--out=baidu.png??
5、將xvfb置入后臺運行
[php]?view plaincopy Xvfb?-fp?/usr/share/fonts?:0?-screen?0?1024x768x24?&?? DISPLAY=:0?./CutyCapt?--url=http://www.baidu.com?--out=baidu.png??
ubuntu下安裝cutycapt ?
1、兩條命令搞定
[php]?view plaincopy apt-get?install?cutycapt?? apt-get?install?xvfb??
2、測試截圖
[php]?view plaincopy 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下面幾乎不存在任何問題。
因為截圖功能涉及到PHP需要執行操作系統的CutyCapt命令，可以通過system()或者exec()函數。
作者分別使用了apache和Nginx兩種Web服務器，在Nginx下會出現執行調用CutyCapt的PHP腳本無法運行的情況，會遇到比較麻煩的權限問題， http://alfred-long.iteye.com/blog/1578904 中提供了一種解決方案，但作者沒有測試成功。使用apache服務器則是一路暢通，不存在這個問題。
因此，作者建議選擇 Ubuntu+apache 的組合，千萬不要選擇 CentOS+Nginx ，需要解決的麻煩問題太多，從而也容易造成一些不安全的因素。
安裝代碼如下：
[php]?view plaincopy apt-get?install?apache2?? apt-get?install?php5?libapache2-mod-php5??
[php]?view plaincopy 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?<a?href="ftp://ftp.kddlabs.co.jp/graphics/ImageMagick/ImageMagick-6.8.7-0.tar.gz"?target="_blank">ftp://ftp.kddlabs.co.jp/graphics/ImageMagick/ImageMagick-6.8.7-0.tar.gz</a>?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。
可以將Windows平臺下的雅黑、宋體、楷體、黑體等常用中文字體安裝到Ubuntu系統中，避免出現截圖中的字體不好看的情況，同時也滿足對富文本編輯中支持的字體進行渲染。
需求及原理
基于PHP，將html內容生成圖片（PNG，JPEG等）
實現方法
1. 直接通過圖形函數生成
可以直接使用PHP中自帶的
GD庫
或
imagick
，將文字內容轉換成為圖片。這在處理純文字內容的時候是很給力的，但是對于富文本內容來說卻很吃力了，很難處理好。目前開源的有
painty
等，可以支持p、img等幾個簡單的html標簽。
2. html->pdf->png
該方式即首先將html內容生成pdf文檔，再將pdf文檔轉換成為圖片。
html to pdf ：目前較為成熟的方案包括 tcpdf ， HTML2PDF 等，其實 HTML 2 PDF 也是使用的tcpdf的內核;
pdf to png ：可以通過 imagick php 擴展。
目前基于該種方式的開源代碼有 html to image ，其原理如下圖所示。
核心代碼為（摘自： http://buffernow.com/html-to-image-php-script/ ）：
[php]?view plaincopy
這里使用了HTML2PDF的代碼，其實個人建議使用tcpdf的，畢竟tcpdf的版本更新，功能更為強大。經過實際測試，tcpdf對中文、html格式等的支持更好，相對而言，HTML2PDF有點慘不忍睹，較長的中文會出現無法自動換行等基本錯誤。
但同時，這種方法存在一個較大的缺陷，當插入了圖片等媒體后，經常會出現一頁內無法放進去需要重新在另外一頁進行排版的問題，從而生成的圖片就會有較大的空白區域；同時每頁的內容如果沒有完全排滿的話，生成的圖片同樣存在較大的空白區域，十分不美觀。
因此，并不推薦這種方式。
3. 通過截圖?
該種方式類似于采用瀏覽器的截圖功能，直接將某個URL地址的內容進行截圖。相對前面兩種方式而言：第一，對于富文本的html內容渲染更為方便、簡單，直接生成html代碼即可；第二，內容排版更為合理，不會出現pdf文檔中存在的空白區域等問題；第三，對于中文的支持更為友好。
目前主要的開源項目包括：
khtml2png ：基于Linux平臺，可以將html轉成圖片格式，有如下要求：
[php]?view plaincopy
對于服務器而言，尤其是資源比較吃緊的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平臺下的大小寫不太一致。 ?
[php]?view plaincopy
它的部署要求是：
[php]?view plaincopy
但是它比khtml2png好的一點是它可以不用裝X server，可以用Xvfb這種輕量級的東西，然后可以這樣使用：
[php]?view plaincopy
通過對各種實現方式進行實際的對比，本人傾向于采用CutyCapt的方式。
具體實現過程
1、通過嵌入富文本編輯器，提供富文本編輯功能，同時可以提供對作者信息、版權標記、圖片大小格式等的定制。
2、將提交的內容進行過濾，并生成htm/html文檔，通過CSS對生成的文檔內容進行格式渲染。
3、通過PHP執行CutyCapt命令，對生成的網頁文件進行截圖。
到這一步已經完全可以實現html內容生成圖片的功能了，但CutyCapt生成的圖片相對而言會比較大，因此還可以進一步進行優化。
4、通過imagick對生成的圖片進行優化
imagick具有強大的圖片處理功能，可以優化CutyCapt生成的圖片的質量及大小，同時還可以方便地進行加水印等操作。
開發經驗分享
在實際開發過程中碰到了各種問題，進行一些分享。
1、操作系統選擇
CutyCapt及imagick都有Linux和Windows的版本，在Windows下面的開發、運行不存在較大的問題，按照正常步驟進行安裝配置即可。
在Linux平臺下，CutyCapt的安裝教程可參考 http://www.cszhi.com/20130305/cutycapt.html ：
centos下安裝cutycapt： ?
（1）安裝qt47
增加qt47的源
[php]?view plaincopy
2、安裝cutycapt
[php]?view plaincopy
3、安裝xvfb
[php]?view plaincopy
4、測試cutycapt截圖
[php]?view plaincopy
5、將xvfb置入后臺運行
[php]?view plaincopy
ubuntu下安裝cutycapt ?
1、兩條命令搞定
[php]?view plaincopy
2、測試截圖
[php]?view plaincopy
中文亂碼問題：
將windows下的中文字體上傳至/usr/share/fonts目錄，執行下命令fc-cache即可。
在這里，作者想說的是，盡量選擇Ubuntu吧，安裝方便；更重要的是，CentOS下面會出現各種問題，如 CutyCapt: cannot connect to X server :99 等，會讓你非常郁悶，我甚至安裝了新的包含Gnome、KDE桌面環境的操作系統仍無法解決，而在Ubuntu下面幾乎不存在任何問題。
2、Web服務器的選擇
因為截圖功能涉及到PHP需要執行操作系統的CutyCapt命令，可以通過system()或者exec()函數。
作者分別使用了apache和Nginx兩種Web服務器，在Nginx下會出現執行調用CutyCapt的PHP腳本無法運行的情況，會遇到比較麻煩的權限問題， http://alfred-long.iteye.com/blog/1578904 中提供了一種解決方案，但作者沒有測試成功。使用apache服務器則是一路暢通，不存在這個問題。
因此，作者建議選擇 Ubuntu+apache 的組合，千萬不要選擇 CentOS+Nginx ，需要解決的麻煩問題太多，從而也容易造成一些不安全的因素。
安裝代碼如下：
[php]?view plaincopy
3、Ubuntu中安裝imagick
[php]?view plaincopy 常見錯誤： ?
在運行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。
4、Linux平臺下的字體渲染
可以將Windows平臺下的雅黑、宋體、楷體、黑體等常用中文字體安裝到Ubuntu系統中，避免出現截圖中的字體不好看的情況，同時也滿足對富文本編輯中支持的字體進行渲染。
總結
以上是生活随笔為你收集整理的长微博生成（将html转化为图片）原理浅析的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 关于android studio中修改图
- 下一篇： C#使用VS 2010在程序加载时创建A