How can we convert html tables in to png using GD library in PHP?

Question

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 img folder. 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

Answer 1

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:

1. create an image such as 640 x 640 pixels manual
2. position or 8 * 8 rectangles, each of size 1/8 of width and height, 80 x 80 pixels manual
3. fill those rectangles with colors manual
4. improve it with some lines, borders, shadows, etc.
5. 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 x horizontal counted from left to right, and y vertical counted from top to bottom.

The points 1 is the point of top left corner and 2 is 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()

Answer 2

Instead of doing this with PHP, the easiest way is to render your table as HTML, make it a canvas, and then use javascript to create the image.

var canvas = document.getElementById("some-canvas-id");
var img = canvas.toDataURL("image/png");