Brief analysis on the principle of long micro-Boshengchen (converting HTML into pictures)

Source: Internet
Author: User
Tags gpg imagemagick pear
There are some requirements in peacetime, and in simple terms, you need to generate some images. Simple content can be processed by Photoshop, but similar to content with tables and so on, it's a waste of time to work with Photoshop every time. There are many similar to the long micro-blog, such as the generation of tools, generate a simple picture is OK, but to use rich text to generate pictures, you need money, so you have to study the implementation of PHP-based.

Requirements and principles

Generate images of HTML content (PNG,JPEG, etc.) based on PHP

Implementation method

1. Generate directly from graphical functions

You can convert text content into images directly using the GD library or imagick that comes with PHP. This is very useful when dealing with plain text content, but it is difficult to handle rich text content. At present, open source has painty and so on, can support P, IMG and so on a few simple HTML tags.

2. Html->pdf->png

This means that the HTML content is first generated in a PDF document, and then the PDF document is converted into a picture.

HTML to PDF: At present, the more mature scheme includes tcpdf,html2pdf, in fact, Html2pdf is also used tcpdf kernel;

PDF to PNG: Can be extended by Imagick PHP.

The current open source code based on this method has HTML to image, which works as shown.

The core code is (excerpt from: http://buffernow.com/html-to-image-php-script/):

Get the content of a URL address    echo file_get_contents (' http://php.cn/');    Convert content to PDF document    $html 2pdf = new Html2pdf (' P ', ' A4 ');    $html 2pdf->writehtml ($html _content);    $file = $html 2pdf->output (' temp.pdf ', ' F ');    Convert a PDF document into a picture    $im = new Imagick (' temp.pdf ');    $im->setimageformat ("jpg");    $img _name = time (). JPG ';    $im->setsize (800,600);    $im->writeimage ($img _name);    $im->clear ();    $im->destroy ();

Here the use of Html2pdf code, in fact, personal advice to use tcpdf, after all, tcpdf version of the update, more powerful features. After the actual test, tcpdf to Chinese, HTML format and other support better, relatively speaking, html2pdf a bit miserable, longer Chinese will be unable to automatically change the line and other basic errors.

But at the same time, there is a big flaw in this method, when the image is inserted into the media, often there will be a page can not be put in another page to the layout of the problem, so that the resulting picture will have a large white space, and the content of each page if not fully filled, The resulting picture also has a large blank area, which is very unattractive.

Therefore, this approach is not recommended.

3. By

This approach is similar to using the browser function, directly to the content of a URL address. Relative to the previous two ways: first, for rich text HTML content rendering more convenient, simple, directly generate HTML code, second, the content is more reasonable, there will be no blank areas in the PDF document, and so on; third, support for Chinese is more friendly.

Currently the main open source projects include:

Khtml2png: Based on the Linux platform, the HTML can be converted into a picture format, with the following requirements:

G++kde 3.xkdelibs for KDE 3.x (Kdelibs4-dev) zlib (Zlib1g-dev) cmake

For servers, especially for resource-strapped VPS, installing a ked is a bit expensive.

Cutycapt and his brother version iecapt: Cutycapt is based on Linux, Windows platform, IECAPT based on Windows platform, support SVG,PS,PDF,ITEXT,HTML,RTREE,PNG,JPEG,MNG , tiff,gif,bmp,ppm,xbm,xpm and other formats, use is relatively simple, direct use of the following commands.

Note: Cutycapt's executable commands do not match the case of Windows platforms and Linux platforms.

./cutycapt--url=http://www.php.cn--out=example.png iecapt--url=http://www.php.cn/--out=localfile.png

Its deployment requirements are:

CUTYCAPT depends on Qt 4.4.0+.

But it's better than khtml2png that it can be used without the X server, XVFB This lightweight stuff, and then using:

Xvfb-run--server-args= "-screen 0, 1024x768x24"./cutycapt--url= ...

Through the actual comparison of the various implementation methods, I tend to adopt the cutycapt way.

Through the actual comparison of the various implementation methods, I tend to adopt the cutycapt way.

Specific implementation process

1, by embedding Rich text editor, provide rich text editing function, at the same time can provide the author information, copyright tags, image size format and other customization.

2, the submission of content filtering, and generate htm/html documents, through the CSS to the generated document content format rendering.

3. Execute the CUTYCAPT command via PHP to generate the Web page file.

This step is fully capable of generating images of HTML content, but the image generated by CUTYCAPT is relatively large, so it can be further optimized.

4, through the Imagick to optimize the generated picture

Imagick has a powerful image processing function, can optimize the quality and size of cutycapt generated images, but also can easily add watermarks and other operations.

Development experience Sharing

In the actual development process encountered a variety of problems, to do some sharing.

1. Operating System Selection

CUTYCAPT and Imagick have versions of Linux and Windows, and there are no major problems with the development and operation under Windows, and the installation configuration can be done in normal steps.

Under the Linux platform, cutycapt installation tutorials can refer to http://www.cszhi.com/20130305/cutycapt.html:

Install cutycapt under CentOS:

(1) Installation qt47

Increase the source of qt47

vim/etc/yum.repos.d/atrpms.repo//Add the following [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//to install Yum Updateyum Install Qt47yum Install Qt47-develyum install Qt47-webkityum install Qt47-webkit-devel

2, Installation Cutycapt

Yum Install SVNSVN Co HTTPS://CUTYCAPT.SVN.SOURCEFORGE.NET/SVNROOT/CUTYCAPTMV cutycapt/cutycapt/usr/local/ Cutycaptcd/usr/local/cutycaptqmakeqmake-qt47

3, Installation Xvfb

Yum Install Xvfb

4. Test CUTYCAPT

Xvfb-run--server-args= "-screen 0, 1024x768x24" cutycapt--url=http://www.php.cn--out=php.png

5, the XVFB into the background to run

xvfb-fp/usr/share/fonts:0-screen 0 1024x768x24 &display=:0. /cutycapt--url=http://www.php.cn--out=php.png

Install cutycapt under Ubuntu

1, two orders to get it done.

Apt-get Install Cutycaptapt-get Install XVFB

2. Testing

Xvfb-run--server-args= "-screen 0, 1024x768x24" cutycapt--url=http://www.php.cn--out=php.png

Chinese garbled problem:

Upload the Chinese font under Windows to the/usr/share/fonts directory and execute the command Fc-cache.

Here, the author wants to say, try to choose Ubuntu Bar, easy to install, and more importantly, there will be a variety of problems in CentOS, such as Cutycapt:cannot Connect to X server:99, will make you very depressed, I even installed a new containing GNOME , the operating system of the KDE desktop environment is still unresolved, and there is almost no problem under Ubuntu.

2, the choice of Web server

Because functionality involves PHP's CUTYCAPT command to execute the operating system, it can be done through the system () or the EXEC () function.

The author uses Apache and nginx two kinds of Web server, under Nginx will be executed call cutycapt PHP script can not run, you will encounter more troublesome permissions problem, Http://alfred-long.iteye.com/blog A solution was provided in/1578904, but the author did not test successfully. Using the Apache server is a smooth, non-existent problem.

Therefore, the author recommends choosing the combination of Ubuntu+apache, do not choose Centos+nginx, need to solve the problem too many problems, it is also easy to create some unsafe factors.

The installation code is as follows:

Apt-get Install Apache2apt-get install PHP5 LIBAPACHE2-MOD-PHP5

3. Install Imagick in Ubuntu

Apt-get Install Php5-dev php5-cli php-pear   //Installation support environment Apt-get install ImageMagick   //may not be the latest version, need to install the latest version through the source code// Source code mode installation 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

Common errors:

There are the following error prompts when running pecl install Imagick:

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

Depending on the hint that the ImageMagick is not installed or the ImageMagick version is not enough, the latest version of ImageMagick can be installed in the source code mode.

4. Font rendering under Linux platform

You can install the black, Arial, italic, blackbody and other common Chinese fonts under the Windows platform into Ubuntu system to avoid the appearance of the font is not good-looking situation, but also to meet the rich text editing supported fonts to render.

  • Related Article

    Contact Us

    The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

    If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

    A Free Trial That Lets You Build Big!

    Start building with 50+ products and up to 12 months usage for Elastic Compute Service

    • Sales Support

      1 on 1 presale consultation

    • After-Sales Support

      24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.