Sonntag, 19. Juni 2011


Spent some minutes doing this after a co-worker of mine had this idea. Here's the PHP-Script:
<!doctype html>
<style type="text/css">
div {position: absolute;width: 1px; height: 1px;}
$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>';

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

Keine Kommentare:

Kommentar veröffentlichen