php 网页变成图片-宁国腾|专业分享网站开发-PHP，软件设计博客，个人笔记

15 05月 2015

在平时工作中有一些需求，简单而言就是需要将一些内容生成图片。简单的内容通过PhotoShop处理还行，但是类似于带表格等的内容，每次都通过PhotoShop进行处理太浪费时间。网上有很多类似于长微博等的生成工具，生成简单的图片还行，但是要使用富文本生成图片，则多需要money，于是便自己研究了一下基于PHP的实现。

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

我自己用的链接是 http://www.php100.com/html/php/lei/2013/0905/5377.html

更多案例

http://blog.chinaunix.net/uid-20639775-id-154473.html

需求及原理

基于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，其原理如下图所示。

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的方式。

具体实现过程

1、如http://loosky.cn/首页所示，通过嵌入富文本编辑器，提供富文本编辑功能，同时可以提供对作者信息、版权标记、图片大小格式等的定制。

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的源

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

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

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置入后台运行

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 cutycapt
apt-get install xvfb

2、测试截图

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，需要解决的麻烦问题太多，从而也容易造成一些不安全的因素。

安装代码如下：

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

3、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。

4、Linux平台下的字体渲染

可以将Windows平台下的雅黑、宋体、楷体、黑体等常用中文字体安装到Ubuntu系统中，避免出现截图中的字体不好看的情况，同时也满足对富文本编辑中支持的字体进行渲染。

第二个网页

单纯使用PHP很难实现,还好在有个比较适中的解决方案:
CutyCapt的说明地址：http://cutycapt.sourceforge.net/

不过要求主机环境的支持:
Linux : 要求安装了qt或x-server
Windows:要求安装了IE(^_…)
下边分别以两种环境开始实现:

Windows :
1.下载 CutyCapt-Win32-2008-06-11.zip (6MB, .exe for Win32 systems)
2.

		    //要截图的网址

   $url = 'http://www.geekso.com';

  //输出图片的位置与名称

  $out = 'D:/ex.png';

   $path = 'D:/CutyCapt/CutyCapt.exe';//你下载CutyCapt存放的位置

   $cmd = "$path --url=$url --out=$out";

   //exec($cmd);

   system($cmd);

?>

Linux :
安装了qt的Linux主机 :
Build Instructions
If your system is set up to compile Qt applications, building CutyCapt should be a simple matter of checking out the source code and running qmake and your version of make. As an example, if you are running Ubuntu Hardy Heron and have configured the system to use packages from hardy-backports, the following should do:

% sudo apt-get install subversion libqt4-webkit libqt4-dev g++
% svn co https://cutycapt.svn.sourceforge.net/svnroot/cutycapt
% cd cutycapt/CutyCapt
% qmake
% make
% ./CutyCapt –url=http://www.example.org –out=example.png

安装了x-server的Linux主机 :
Using CutyCapt without X server
You cannot use CutyCapt without an X server, but you can use e.g. Xvfb as light-weight server if you are not running an interactive graphical desktop environment. For example, you could use:

% xvfb-run –server-args=”-screen 0, 1024×768x24″ ./CutyCapt –url=… –out=…

使用帮助:
Usage
Open a command prompt and ask for help:

% CutyCapt –help
—————————————————————————–
Usage: CutyCapt –url=http://www.example.org/ –out=localfile.png
—————————————————————————–
–help Print this help page and exit
–url= The URL to capture (http:…|file:…|…)
–out= The target file (.png|pdf|ps|svg|jpeg|…)
–out-format= Like extension in –out, overrides heuristic
–min-width= Minimal width for the image (default: 800)
–max-wait= Don’t wait more than (default: 90000, inf: 0)
–delay= After successful load, wait (default: 0)
–user-styles= Location of user style sheet, if any
–header=: request header; repeatable; some can’t be set
–method= Specifies the request method (default: get)
–body-string= Unencoded request body (default: none)
–body-base64= Base64-encoded request body (default: none)
–app-name= appName used in User-Agent; default is none
–app-version= appVers used in User-Agent; default is none
–user-agent= Override the User-Agent header Qt would set
–javascript= JavaScript execution (default: on)
–java= Java execution (default: unknown)
–plugins= Plugin execution (default: unknown)
–private-browsing= Private browsing (default: unknown)
–auto-load-images= Automatic image loading (default: on)
–js-can-open-windows= Script can open windows? (default: unknown)
–js-can-access-clipboard= Script clipboard privs (default: unknown)
—————————————————————————–
is svg,ps,pdf,itext,html,rtree,png,jpeg,mng,tiff,gif,bmp,ppm,xbm,xpm

如果以上内容不能满足你的需求或都出现乱码请点击以下链接查看：
http://blog.saymoon.com/2009/11/take-snapshot-in-linux-command-line/

安装

http://mobile.51cto.com/symbian-272869.htm

本文介绍的是Linux 下编译并安装配置 Qt，最近准备做 Nokia 的 Symbian,Maemo 下触摸屏开发。考虑到程序的跨平台可移植性，最终选择使用 Qt 开发。相对来说，国内关于 Qt 相关文档并不算很多。作者将 Linux 下编译并安装配置 Qt 全过程总结了一下，只希望可以方便更多的朋友！

1、获得源代码

src 官网下载地址：ftp://ftp.qt.nokia.com/qt/source/

2009 年 10 月 1 日发布的 qt-x11-opensource-src-4.5.3.tar.gz，大小 122 Mb。

2、解压缩

	
		
		
			tar xvfz qt-x11-opensource-src-4.5.3.tar.gz

3、生成 makefile 文件

	
		
		
			./configure

这个时候他会问你：“Which edition of Qt do you want to use?”

然后给你两个类型供选择：

	
		
		
			Type ''c'' if you want to use the Commercial Edition.  
		

		
			Type ''o'' if you want to use the Open Source Edition.

第一个是商业版，第二个是自由版。

选择 ''o''（Qt/嵌入式自由版是Qt为了开发自由软件提供的嵌入式版本）。

这时候，出现许可界面。

选择 ''yes'' 接受许可协议。

开始生成 makefile 文件。这个大约需要 5 -10 分钟的时间。

4、Qt 编译

	
		
		
			gmake

这个过程时间比较长，需要两个小时左右。

5、Qt 安装

运行 gmake install

默认安装至 /usr/local/Trolltech/Qt-4.5.3

大约 5 － 10 分钟。正常结束，安装完毕。

运行 /usr/local/Trolltech/Qt-4.5.3/bin/designer ，看见 qt 启动，也就是说 qt 安装好了。

6、设置环境变量

一、先修改用户环境变量

	
		
		
			vi /home/defonds/.bashrc

在其最后添加以下信息

	
		
		
			export QTDIR=/usr/local/Trolltech/Qt-4.5.3  
		

		
			export PATH=$QTDIR/bin:$PATH  
		

		
			export MANPATH=$QTDIR/man:$MANPATH  
		

		
			export LD_LIBRARY_PATH=$QTDIR/lib:$LD_LIBRARY_PATH

二、再修改所有用户环境变量

	
		
		
			vi /etc/profile

在其最后添加以下信息

	
		
		
			export QTDIR=/usr/local/Trolltech/Qt-4.5.3  
		

		
			export PATH=$QTDIR/bin:$PATH  
		

		
			export MANPATH=$QTDIR/man:$MANPATH  
		

		
			export LD_LIBRARY_PATH=$QTDIR/lib:$LD_LIBRARY_PATH

三、测试一下

重新开一个终端，输入命令：

	
		
		
			qmake -v

输出结果：

	
		
		
			QMake version 2.01a  
		

		
			 Using Qt version 4.5.3 in /usr/local/Trolltech/Qt-4.5.3/lib

输入命令：

	
		
		
			which qmake

输出结果：

	
		
		
			/usr/local/Trolltech/Qt-4.5.3/bin/qmake

证明 Qt 环境变量已经被配置成功。

编者按：

Linux 启动时，先读取用户环境变量，即 /home/defonds/.bashrc 的设置。次读取所有用户环境变量，即 /etc/profile 中的配置。

开始 Qt

写个简单的 Qt 程序使用安装的 Qt 编译来测试一下它的工作效果

新建一个文件名为 hello.cpp，其内容如下：

	
		
		
			view plaincopy to clipboardprint?#include <QApplication>     
		

		
			#include <QLabel>     
		

		
			int main(int argc,char *argv[])    
		

		
			{    
		

		
			    QApplication app(argc,argv);    
		

		
			    QLabel *label = new QLabel("Hello Qt!");    
		

		
			    label->show();    
		

		
			    return app.exec();    
		

		
			}    
		

		
			#include <QApplication> 
		

		
			#include <QLabel> 
		

		
			int main(int argc,char *argv[])  
		

		
			{  
		

		
			 QApplication app(argc,argv);  
		

		
			 QLabel *label = new QLabel("Hello Qt!");  
		

		
			 label->show();  
		

		
			 return app.exec();  
		

		
			}

保存 hello.cpp，编译过程如下：

在 hello.cpp 所在目录下，运行命令

	
		
		
			qmake -project

hello.cpp 同目录下有 hello.pro 文件被生成，它是与平台无关的工程文件。

在 hello.cpp 所在目录下，运行命令

	
		
		
			qmake hello.pro

同目录下有 Makefile 文件被生成（Makefile是指导编译器编译源代码的配置文件，在其目录下输入make命令(nmake在win32,vc6环境)就可以完成编译）。在 hello.cpp 所在目录下，运行命令

	
		
		
			make

同目录下有 hello,hello.o 两个文件被编译生成。其中 hello 就是在当前 Linux 系统下使用 Qt 编译生成的可执行文件了。双击运行 hello，“Hello Qt!“ 文本框弹出，OK！做到这一步，证明 Qt 已经完全可以在你的电脑上运作了。还等什么呢，开始你精彩而又愉快的 Qt 开发之旅吧！

linux 安装QT

Linux下安装Qt
前段时间简单的学习了一下Linux下图形编程Qt编程软件，安装方法我来说一下，最令我难忘的是安装Qt编译时间长达漫长两个小时。下面我就来说一下安装Qt的具体步骤：

一、下载Qt源码包到本机，然后解压缩
#tar zxvf qt-x11-free-3.2.1.tar.gz -C /usr/local          //将qt-x11-opensource-src-4.2.3.tar.gz源码包解压缩到/usr/local目录（推荐解压缩至 /usr/local目录）

二、进入用户家目录的.bash_profile文件设置Qt环境变量，在这里我们以root用户以例。
#vi /root/.bash_profile          //打开root用户.bash_profile文件
在root用户.bash_profile文件中设置环境变量，在此文件里面添加如下内容：
QTDIR=/usr/local/qt-x11-opensource-src-4.3.0
PATH=$QTDIR/bin:$PATH
MANPATH=$QTDIR/doc/man:$MANPATH
LD_LIBRARY_PATH=$QTDIR/lib:$LD_LIBRARY_PATH
export QTDIR PATH MANPATHLD_LIBRARY_PATH
添加完上面信息后按ESC键，“Shife+:”组合键回到vi编辑器命令行状态，输入wq!（强制保存退出）

三、添加完环境变量后，使环境变量立即生效：#source /root/.bash_profile

四、进入Qt解压缩的目录
#cd $QTDIR或#cd /usr/local/qt-x11-free-3.2.1都可以，因为在/root/.bash_profile文件已经定义了环境变量QTDIR= /usr/local/qt-x11-free-3.2.1和export QTDIR 。

五、使用configure工具来构建Qt库和它提供的工具：./configure（./configure --help 配置选择的列表。例：-thread选项来创建这个库的一个多纯种版本。）

六、最后一步就要进入漫长的Qt安装编译时间了，有事的就出去办事吧，安装编译时间大约需要两个小时。编译命令：make
Qt安装过程就是这样了，祝您安装Qt成功！！最后说明一下我的安装环境是Red Hat Linux 9 操作系统。

首先我们进入Linux的图形界面，打开一个控制终端（在桌面空间处单击鼠标右键，在弹出的单菜中选择“新建控制终端”。），在控制终端里面新建一个.cpp文件，并编写程序，如下：
#vi HelloWorld.cpp        //建立一个HelloWorld.cpp文件
#include<qapplication.h>
#include<qlabel.h>
int main(int argc,char *argv[])
{
          QLabel *label=new QLabel("Hello World!!!",0);
          QApplication app(argc,argv);
          app.setMainWidget(label);
          label->show();
          return app.exec();
}
写完上面的代码后保存退出（wq）vi编辑器。
#qmake -project          //把.cpp文件编译成.pro文件
#qmake HelloWorld.pro          //通过.pro文件自动创建Makefile文件
#make            //编译，生成HelloWorld执行文件
#./HelloWorld        //运行HelloWorld文件
程序正常运行对话框显示“HelloWorld!!!”，证明Qt安装成功！！

QT 3.0 简明安装、使用指南

假设你已经下载了 QT 3.0 的源代码包并解压到了 /usr/local/qt 目录下，然后按照下面的步骤可以安装 QT 库到你的计算机中。此方法在 Red Hat Linux 7.1 下编译安装通过。

1. 请先设置环境变量，否则无法编译 QT。
编辑 /etc/profile 文件，输入：

QTDIR=”/usr/local/qt”
PATH=”$QTDIR/bin:$PATH”
LD_LIBRARY_PATH=”$LD_LIBRARY_PATH”
QMAKESPEC=”linux-g++”
export QTIDR PATH LD_LIBRARY_PATH QMAKESPEC

QMAKESPEC 环境变量可参考 $QTDIR/mkspec 目录中的名字，各位可根据自己的系统编译环境进行设置。
比如你用 Microsoft Visual Studio 编译程序，那么就要设置如下环境变量：
QMAKESPEC=”win32-msvc”
用 Linux 就这样设置：
QMAKESPEC=”linux-g++”

2. 编译 QT。

cd /usr/local/qt
./configure
make
美美地睡 N 个小时…
qmake

3. 用 QT 3.0 编译程序。

这里假设你已经用 QT Designer 做好一个窗体并已写好了相关事件的响应代码，下面在 QT Designer 中选择 File|New 菜单并选择 “C++ Main-File (main.cpp)” 项，然后保存。
切换到命令行方式，输入：

qmake
make

第二次编译时就不必再输入 qmake 了，因为 make 会为你代劳

特殊说明，本文版权归 ning个人博客所有带原创标签请勿转载，转载请注明出处.

本文标题： php 网页变成图片

本文网址： http://www.ningguoteng.com/show-66.html

点击下载源代码： http://pan.baidu.com/s/1mgKeDTI

发表评论