Question

我正在尝试创建一个棋盘并将其另存为png文件。我添加了创建棋盘并将图像存储到img文件夹中的功能。图片存储在文件夹中，但为空白，并且html代码显示在图片上。我用GD库。

我在这里包含了我的代码，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>';
            } 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');
?>

当前结果

PHP信息

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

由于HTML表及其CSS是由网络浏览器“呈现”的，因此您不能简单地将其代码发送到GD库并期望图形输出。所要做的只是打印示例中显示的字符串。

您可以做的是在没有HTML代码的情况下进行绘制，即将图像填充为几何形状并填充颜色的图形，这对于GD库而言是非常理想的方法。

让我们考虑一下：一个棋盘。棋盘是一个具有八行八列的正方形，上面有两种基本颜色，浅色和深色。因此，您所需要做的就是：

创建诸如640 x 640像素的图像manual
位置或8 * 8个矩形，每个宽度和高度的大小为1 / 8，80 x 80像素manual
用颜色manual
通过一些线条，边框，阴影等来改善它。
渲染最终图像manual

here或here是互联网上许多教程之一。

编辑这是第一列和第一行的示例，没有任何优化只是概念上的证明：

<?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);
  ?>

输出为：

需要更多说明-您在这里：

在上面的示例中，我使用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()

Answer 2

最简单的方法是用PHP呈现表，使其成为画布，然后使用javascript创建图像，而不是使用PHP。

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

我们如何使用PHP中的GD库将html表转换为png？

2 个答案: