Поскольку HTML-таблица с ее CSS-кодом «визуализируется» веб-браузером, вы не можете просто отправить ее код в библиотеку GD и ожидать графического вывода.Для этого просто напечатайте строку, как показано в вашем примере.
Что вы можете сделать, это нарисовать без HTML-кода, то есть в виде изображения с геометрическими фигурами, заполненными цветами, что является идеальным подходом для библиотеки GD.
Давайте подумаем об этом: шахматная доска.Шахматная доска представляет собой квадрат с восемью рядами и восемью колоннами, окрашенными в два основных цвета: светлый и темный.Итак, все, что вам нужно, это:
- создать изображение, например, 640 x 640 пикселей ручное
- положение или 8 * 8 прямоугольников, каждый размером 1 /8 ширины и высоты, 80 x 80 пикселей вручную
- закрасьте эти прямоугольники цветами вручную
- улучшите его с помощью некоторых линий, границ и тенейи т. д.
- рендеринг окончательного изображения руководство
Одним из многих учебных пособий в Интернете является здесь или здесь .
РЕДАКТИРОВАТЬ Вот пример с первым столбцом и первой строкой без какой-либо оптимизации просто подтверждение концепции:
<?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 пикселей, т.е.у1 = 30 (сверху).А теперь установите в нижнем правом углу координаты +20 пикселей от x1 и y1, то есть x2 = 30 и y2 = 50. И т. Д.
Короче говоря: первая точка в левом верхнем углу квадрата где-нибудь,это установит координаты x1 и y1.Затем добавьте данные пикселей к обеим координатам, чтобы создать квадрат и умножьте его на заданный номер строки и столбца, т.е.если 20 пикселей, то x2 = x1 + 20 * номер столбца, y2 = y2 + 20 * номер строки.
См. функцию PHP imagerectangle ()