日韩性视频-久久久蜜桃-www中文字幕-在线中文字幕av-亚洲欧美一区二区三区四区-撸久久-香蕉视频一区-久久无码精品丰满人妻-国产高潮av-激情福利社-日韩av网址大全-国产精品久久999-日本五十路在线-性欧美在线-久久99精品波多结衣一区-男女午夜免费视频-黑人极品ⅴideos精品欧美棵-人人妻人人澡人人爽精品欧美一区-日韩一区在线看-欧美a级在线免费观看

歡迎訪問 生活随笔！

生活随笔

當前位置： 首頁 > 编程资源 > 编程问答 >内容正文

编程问答

长微博生成（将html转化为图片）原理浅析

發布時間：2024/1/1 编程问答 28 豆豆
生活随笔 收集整理的這篇文章主要介紹了 长微博生成（将html转化为图片）原理浅析 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
在平時工作中有一些需求，簡單而言就是需要將一些內容生成 圖片 。簡單的內容通過PhotoShop處理還行，但是類似于帶表格等的內容，每次都通過PhotoShop進行處理太浪費時間。網上有很多類似于 長微博 等的生成工具，生成簡單的圖片還行，但是要使用富文本生成圖片，則多需要money，于是便自己研究了一下基于 PHP 的實現。


需求及原理

基于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
  • //獲取某個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有點慘不忍睹，較長的中文會出現無法自動換行等基本錯誤。

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

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


    3. 通過截圖?

    該種方式類似于采用瀏覽器的截圖功能，直接將某個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生成的圖片的質量及大小，同時還可以方便地進行加水印等操作。


    開發經驗分享

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


    1、操作系統選擇

    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下面幾乎不存在任何問題。


    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
  • apt-get?install?apache2??
  • apt-get?install?php5?libapache2-mod-php5??


    • 3、Ubuntu中安裝imagick

    [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。


    4、Linux平臺下的字體渲染

    可以將Windows平臺下的雅黑、宋體、楷體、黑體等常用中文字體安裝到Ubuntu系統中，避免出現截圖中的字體不好看的情況，同時也滿足對富文本編輯中支持的字體進行渲染。

    總結

    以上是生活随笔為你收集整理的长微博生成（将html转化为图片）原理浅析的全部內容，希望文章能夠幫你解決所遇到的問題。

    如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。