我们如何使用PHP中的GD库将html表转换为png? [英] How can we convert html tables in to png using GD library in PHP?
问题描述
我正在尝试创建一个棋盘并将其另存为png文件.我添加了创建棋盘并将图像存储在 img 文件夹中的功能.图片存储在文件夹中，但是为空白，并且html代码显示在图片上.我使用了GD Library.
我已包含我的代码php gd库信息&图片在这里.任何帮助将不胜感激.
<?php$ tableWidth = 150.'px';$ width = 20.'px';$ height = 20.'px';$ image =< table width =".$ tableWidth."style ='margin-left:200px;'>";for($ i = 0; $ i< 8; $ i ++){$ image.="< tr>;for($ j = 0; $ j< 8; $ j ++){if($ i％2 == 0){if($ j％2 == 0){$ image.='< td style ="background-color:pink; width:'.$ width.'; height:'.$ height.'"></td>';} 别的 {$ image.='< td style ="background-color:黑色;宽度:'.$ width.';高度:'.$ height.'"></td>';}} 别的 {if($ j％2 == 0){$ image.='< td style ="background-color:黑色;宽度:'.$ width.';高度:'.$ height.'"></td>';} 别的 {$ image.='< td style ="background-color:pink; width:'.$ width.'; height:'.$ height.'"></td>';}}}$ image.="</tr>;}$ image.="< table>;$ im = @imagecreate(300，600)或死(无法初始化新的GD图像流")；$ background_color = imagecolorallocate($ im，0，0，0);$ text_color = imagecolorallocate($ im，233，14，91);imagestring($ im，1，5，5，$ image，$ text_color);//imagettftext($ img，9，0，1，1，$ white，"VERDANA.TTF"，$ html_code);header("Content-Type:image/png");imagepng($ im，'img/chessboard.png');?> 当前结果
PHP信息
GD支持已启用捆绑了GD版本(兼容2.1.0)FreeType支持已启用FreeType与freetype的链接FreeType版本2.9.1GIF读取支持已启用GIF创建支持已启用启用JPEG支持兼容libJPEG版本9已启用PNG支持libPNG版本1.6.34启用WBMP支持启用XPM支持libXpm版本30512启用XBM支持WebP支持已启用 由于HTML表及其CSS是由网络浏览器呈现"的，因此您不能简单地将其代码发送到GD库并期望图形输出.所要做的只是打印示例中显示的字符串.
您可以做的是在没有HTML代码的情况下进行绘制，即以几何形状填充颜色的图像进行绘制，这对于GD库而言是非常完美的方法.
让我们考虑一下:一个棋盘.棋盘是一个具有八行八列的正方形，上面有两种基本颜色，浅色和深色.因此，您所需要做的就是:
- 创建诸如640 x 640像素的图像
需要更多说明-您在这里:
在上面的示例中，我使用20x20像素的正方形，因此每行从+20像素开始向下，然后从上一行开始，每列从+20像素开始，然后从上一列开始.
从左到右依次将轴命名为
x水平轴，从上至下依次将轴命名为y垂直轴.点
1是正方形的左上角点，而2是正方形的右下角点.从这个角度来看，图像的最左上角的所有坐标都等于零，即.x1 = 0，y1 = 0，x2 = 0，y2 = 0.
现在是正方形
第一行的第一个正方形从顶部和左边开始填充10个像素，因此左上角的坐标为x1 = 10(从左边)，y1 = 10(从顶部)，并且正方形的尺寸为20像素，因此右下角的坐标是x2 = x1 + 20和y2 = y2 + 20，即.x2 = 30，y2 = 30.
第二行的第一个正方形从左起有10个像素的填充，并紧接在第一行正方形的下面，保持填充与以前相同，即.x1 = 10以保留填充(从左侧开始)，但将起点从顶部+20像素(即)移动.y1 = 30(从顶部开始).现在，将右下角设置为坐标x20和x1和y1的+20像素，即x2 = 30和y2 = 50.依此类推.
长话短说:第一点的正方形的左上角位于某处，这将设置x1和y1坐标.第二次将给定像素添加到两个坐标以创建一个正方形，并将其与给定的行数和列数相乘，即如果是20个像素，则x2 = x1 + 20 *列号，y2 = y2 + 20 *行号.
请参阅PHP函数 imagerectangle()
I am trying to create a chessboard and save as png file. I have added the functionality to create a chessboard and store the image in to the
imgfolder. Image is storing in to the folder but it is blank and html code is showing on image. I used GD Library.I have include my code, php gd library info & image here. Any help would be appreciated.
<?php $tableWidth = 150 . 'px'; $width = 20 . 'px'; $height = 20 . 'px'; $image = "<table width=".$tableWidth." style='margin-left: 200px;'>"; for($i=0; $i < 8; $i++){ $image .= "<tr>"; for($j=0; $j < 8; $j++){ if($i % 2 == 0){ if($j % 2 == 0){ $image .= '<td style="background-color: pink; width: '.$width.'; height: '.$height.'"></td>'; } else { $image .= '<td style="background-color: black; width: '.$width.'; height: '.$height.'"></td>'; } } else { if($j % 2 == 0){ $image .= '<td style="background-color: black; width: '.$width.'; height: '.$height.'"></td>'; } else { $image .= '<td style="background-color: pink; width: '.$width.'; height: '.$height.'"></td>'; } } } $image .= "</tr>"; } $image .= "<table>"; $im = @imagecreate(300, 600) or die("Cannot Initialize new GD image stream"); $background_color = imagecolorallocate($im, 0, 0, 0); $text_color = imagecolorallocate($im, 233, 14, 91); imagestring($im, 1, 5, 5, $image, $text_color); //imagettftext($img, 9, 0, 1, 1, $white, "VERDANA.TTF", $html_code); header("Content-Type: image/png"); imagepng($im, 'img/chessboard.png'); ?>Present Result
PHP Info
GD Support enabled GD Version bundled (2.1.0 compatible) FreeType Support enabled FreeType Linkage with freetype FreeType Version 2.9.1 GIF Read Support enabled GIF Create Support enabled JPEG Support enabled libJPEG Version 9 compatible PNG Support enabled libPNG Version 1.6.34 WBMP Support enabled XPM Support enabled libXpm Version 30512 XBM Support enabled WebP Support enabled解决方案Since the HTML table with its CSS is "rendered" by the web browser you cannot simply send its code to the GD library and expect graphical output. What is does is just print the string as shown in your example.
What you could do is to draw without the HTML code ie as an image with geometric shapes filled with colors that is pretty perfect approach for GD library.
Let's think about it: a chessboard. Chessboard is a square with eight rows and eight columns colored with two basic colors light and dark. So all you need is to:
- create an image such as 640 x 640 pixels manual
- position or 8 * 8 rectangles, each of size 1/8 of width and height, 80 x 80 pixels manual
- fill those rectangles with colors manual
- improve it with some lines, borders, shadows, etc.
- render final image manual
One of many tutorials over the internet is here or here.
EDIT Here is an example with first column and first row without any optimization just proof of concept:
<?php header('Content-type: image/png'); $png_image = imagecreate(180, 180); $grey = imagecolorallocate($png_image, 229, 229, 229); $black = imagecolorallocate($png_image, 0, 0, 0); $white = imagecolorallocate($png_image, 255, 255, 255); imagefilltoborder($png_image, 0, 0, $grey, $grey); // first row imagefilledrectangle ($png_image, 10, 10, 30, 30, $black); imagefilledrectangle ($png_image, 30, 10, 50, 30, $white); imagefilledrectangle ($png_image, 50, 10, 70, 30, $black); imagefilledrectangle ($png_image, 70, 10, 90, 30, $white); imagefilledrectangle ($png_image, 90, 10, 110, 30, $black); imagefilledrectangle ($png_image, 110, 10, 130, 30, $white); imagefilledrectangle ($png_image, 130, 10, 150, 30, $black); imagefilledrectangle ($png_image, 150, 10, 170, 30, $white); // first column imagefilledrectangle ($png_image, 10, 10, 30, 30, $black); imagefilledrectangle ($png_image, 10, 30, 30, 50, $white); imagefilledrectangle ($png_image, 10, 50, 30, 70, $black); imagefilledrectangle ($png_image, 10, 70, 30, 90, $white); imagefilledrectangle ($png_image, 10, 90, 30, 110, $black); imagefilledrectangle ($png_image, 10, 110, 30, 130, $white); imagefilledrectangle ($png_image, 10, 130, 30, 150, $black); imagefilledrectangle ($png_image, 10, 150, 30, 170, $white); imagepng($png_image); imagedestroy($png_image); ?>The output is:
More explanation needed - here you are:
In the example above I use squares 20x20 pixels, so every row starts on +20 pixels down then previous and every column on +20 pixels then previous column.
The axes are named
xhorizontal counted from left to right, andyvertical counted from top to bottom.The points
1is the point of top left corner and2is bottom right corner of the square.From this point of view the most top left corner of the image has all coordinates equal to zero, ie. x1 = 0, y1 = 0, x2 = 0, y2 = 0.
Now the squares
The first square in first row has padding 10 pixels from top and from left so the upper left coordinates are x1 = 10 (from left), y1 = 10 (from top), and the square has 20 pixels of dimension, so the bottom right coordinates are x2 = x1 + 20 and y2 = y2 + 20, ie. x2 = 30, y2 = 30.
The first square in second row has padding 10 pixels from left and is attached just bellow the first row square, keep the padding same as before, ie. x1 = 10 to keep the padding (from left) but move the starting point from top +20 pixels, ie. y1 = 30 (from top). And now set the bottom right corner to coordinates +20 pixels form x1 and y1, ie x2 = 30 and y2 = 50. And so on.
Long story short: First point top left corner of the square somewhere, this will set the x1 and y1 coordinates. Second add given of pixels to both coordinates to create a square and multiply it with given row and column number, ie. if 20 pixels, then x2 = x1 + 20 * column_number, y2 = y2 + 20 * row_number.
Refer to PHP function imagerectangle()
这篇关于我们如何使用PHP中的GD库将html表转换为png?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
