<!doctype html>
<html>
<head>
<style type="text/css">
div {position: absolute;width: 1px; height: 1px;}
</style>
</head>
<body>
<?php
$imagePath = 'path/to/picture/and/picname.jpg';
$img = imagecreatefromjpeg($imagePath);
$heightWidth = getimagesize($imagePath);
$imgH = --$heightWidth[1];
$imgW = --$heightWidth[0];
for ($xc=0; $xc<=$imgH; $xc++) {
for ($yc=0; $yc<=$imgW; $yc++) {
$color_index = imagecolorat($img, $yc, $xc);
$color_tran = imagecolorsforindex($img, $color_index);
echo '<div style="background:rgb('.$color_tran['red'].','.$color_tran['green'].','.$color_tran['blue'].');top:'.$xc.'px;left:'.$yc.'px;"></div>';
}
}
?>
</body>
</html>
Using this one with a picture with more than 160.000 pixel will produce a html-file with a size of more than 10 Megabyte. The Script runs trough in less than a second, rendering the divs in the browser is what makes it unuseable, but it works well to around 200.000 pixel.
Optimization ideas:
- float instead of absolute (have no idea if that speeds up or slows down)
- reduce the markup as much as possible
- if the pixel next to the last rendered pixel hast the same color, the element could be extended, insted of placing a new element
- some more, too lazy to write them down now...
