The compiled html is converted into pictures by server-side parsing.

Because html is usually parsed by client browser, the server can not parse HTML code directly. So we need php class libraries and extensions to fulfill this requirement.

The file conversion process is html - > PDF - > png.

The class libraries needed are mPDF, imagick

The official download address of pdf is: http://www.mpdf1.com/mpdf/index.php (Recommended in 6.0 although a little larger) This is a class library can be downloaded and uploaded directly to the server, there are many things, a new HTML 2PDF folder introduced

include('./html2pdf/mpdf');

A whole function

/*
Name html converted to pdf picture
 Function to convert html pages into pdf pictures (some css styles can not be recognized)
Number of parameters 2
1.Must html code be retrieved with file_get_content
2.pdf storage location path must be generated
3.Unnecessary pdf width
4.High non-essential pdf
 Return Value Picture Name
 Instance code($html,'img/1.pdf');
 * */
function html2pdf($html, $PATH, $w=414 ,$h=736){
    //Setting Chinese fonts(Importantly, it will affect the image generation in the second step.)
$mpdf=new mPDF('utf-8');
$mpdf->autoScriptToLang = true;
$mpdf->autoLangToFont = true;
//Set up pdf Size
$mpdf->WriteHTML('<pagebreak sheet-size="'.$w.'mm '.$h.'mm" />');


//Set up pdf Display mode
$mpdf->SetDisplayMode('fullpage');

//delete pdf First page(Due to settings pdf Dimensions lead to an extra page.)
$mpdf->DeletePages(1,1);

$mpdf->WriteHTML($html);

$pdf_name = md5(time()).'.pdf';

$mpdf->Output($PATH.$pdf_name);

return $pdf_name;

}

Using this function can basically solve the problem of HTML to pdf. It should be noted that mpdf can not effectively identify all the css styles in html, such as position border-radius. Location can be solved by margin. If you need to display rounded images, you need to cut them into circles.

Next, start converting pdf to png pictures. This step requires running the command once the ImageMagick component is installed on the server.

yum install -y ImageMagick
yum install -y ImageMagick-devel
yum install -y gcc
yum install -y php-pear
yum install -y ghostscript
yum install -y ghostscript-devel.x86_64

At this point, pay attention to operation

yum list |grep imagick

According to the query results and according to their own server version, I choose to install 5.6.3

yum install -y php56w-pecl-imagick.x86_64
yum install -y php56w-pecl-imagick-devel.x86_64

Restart the server

service nginx restart
service php-fpm restart

Use phpinfo() or run php -m | grep imagick to see if the installation was successful

Then use the function to convert the generated pdf to png

/*
Name pdf converted to png picture
 Function to convert pdf pictures to png pictures
 Number of parameters 2
1.Must html code be retrieved with file_get_content
2.pdf storage location path must be generated

Instance code($html,'img/1.pdf');
 * */
function pdf2png($PDF, $PNG, $w=50, $h=50){
if(!extension_loaded('imagick')){
return false;
}
if(!file_exists($PDF)){
return false;
}

$im = new Imagick();

$im->setResolution($w,$h); //Setting Resolution
$im->setCompressionQuality(15);//Setting the quality of image compression

$im->readImage($PDF);
$im -> resetIterator();
$imgs = $im->appendImages(true);
$imgs->setImageFormat( "png" );
$img_name = $PNG;
$imgs->writeImage($img_name);
$imgs->clear();
$imgs->destroy();
$im->clear();
$im->destroy();

return $img_name;
}

ok, basically completed the simple page graphics. The size of the picture is about 1M. It's not clear.