I have implemented a code block to read in an image pixel by pixel and display it as a series of div tags arranged in a table-like fashion. The code is mostly inspired by a comment on PHP.net (http://www.php.net/manual/en/function.imagecolorat.php). This is my implementation:
<?php
$img = imagecreatefrompng("image1.png");
$width = imagesx($img);
$height = imagesy($img);
for($y=0;$y<$height;$y++) {
for($x=0;$x<$width;$x++) {
$rgb = imagecolorat($img, $x, $y);
$r = ($rgb >> 16) & 0xFF;
$g = ($rgb >> 8) & 0xFF;
$b = $rgb & 0xFF;
$hex = "#".str_repeat("0",2-strlen(dechex($r))).dechex($r).
str_repeat("0",2-strlen(dechex($g))).dechex($g).
str_repeat("0",2-strlen(dechex($b))).dechex($b);
echo "<div style='background: {$hex}; height: 5px; width: 5px; display: inline;'></div>\r\n";
/*
echo "#".str_repeat("0",2-strlen(dechex($r))).dechex($r).
str_repeat("0",2-strlen(dechex($g))).dechex($g).
str_repeat("0",2-strlen(dechex($b))).dechex($b).",";
*/
}
echo "<br />\r\n";
}
?>
I have experimented with different values for the display property such as 'block', 'inline', 'inline-block' and 'inline-table'. However, each option seems to introduce its own issues. I either get no output at all, columns of pixels forming a vertical line, or correctly aligned divs but with unnecessary spacing (which is unexpected since I am using a reset.css file to remove padding and spacing).
Additionally, this code does not handle transparency properly. The image I'm using contains transparent pixels, but they are being displayed as light blue.
You can find my implementation here.