Home/ Questions/Q 6808721
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-26T19:59:27+00:00

This is tricky to explain, but for curiosities sake, I’d like to grab an

  • 0

This is tricky to explain, but for curiosities sake, I’d like to grab an image with PHP, split it into 1 pixel parts and do a foreach and assign each pixel to a div as an image/background image. So when the picture is displayed on the screen it looks whole, but its actually lots of 1px divs.

Using GD or a similar library, is this possible?

(Also, if this is easier with Javascript and Canvas then i’d be interested to know)

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    As others have said, you’d need to use the imagecolorat function to select the image at each pixel, then loop through and render the elements as necessary.

    Just because I found this interesting more so than practical I had a play around with it.

    Below is some quickly thrown together code which demonstrates a couple of outputs from this. image.jpg is a 50x39px image of a monkey which amounts to 1950 1x1px images. The image below shows the output- the first image is the original, the second is the one with a matrix of 1x1px images as div backgrounds, the third is the hex colour picked from the original then background:#xxxxxx; on that 1x1px div. Be warned, if you test this use a small image! as obviously it generates an image for each pixel in the original image.

    For future readers, this is more a proof of concept and should not be used in a production environment!

    Edit: The third image in the screenshot obviously isn’t rendered correctly- however this now works thanks to a suggestion by minitech. The code below has been amended to reflect this change.

    Original, 1px rendered, 1px hex colour rendered

    <?php

$im = imagecreatefromjpeg("image.jpg");
$w = imagesx($im);
$h = imagesy($im);

?>

<div style="background:url(image.jpg);float:left;width:50px;height:39px;"></div>
<div style="clear:both;"></div>
-------<br />
<div style="clear:both;"></div>

<?php

/*
 * Do it with image creation, image per pixel
 */

for( $i = 0; $i < $w; $i++ ) {
    for( $j = 0; $j < $h; $j++ ) {      
        if( !file_exists( "dots/{$i}_{$j}.jpg" ) ) {
            $dot = imagecreatetruecolor(1, 1);
            imagefill($dot, 0, 0, imagecolorat($im, $i, $j));
            imagejpeg($dot, "dots/{$i}_{$j}.jpg", 100); 
            imagedestroy($dot);
        }

        $dots[$j][$i] = "dots/{$i}_{$j}.jpg";
    }
}

foreach( $dots as $column ) {
    foreach( $column as $row ) {
        echo '<div style="background:url('.$row.');float:left;width:1px;height:1px;"></div>';
    }
    echo '<div style="clear:both;"></div>';
}

/*
 * Do it with picking the hex colour
 */

?>

<div style="clear:both;"></div>
-------<br />
<div style="clear:both;"></div>

<?php

for( $i = 0; $i < $w; $i++ ) {
    for( $j = 0; $j < $h; $j++ ) {
        $array[$j][$i] = get_hex(imagecolorat($im, $i, $j));
    }
}

foreach( $array as $column ) {
    foreach( $column as $row ) {
        echo '<div style="background:'.$row.';float:left;width:1px;height:1px;"></div>';
    }
    echo '<div style="clear:both;"></div>';
}

function get_hex( $dec ) {
    $r = ($dec >> 16) & 0xFF;
    $g = ($dec >> 8) & 0xFF;
    $b = $dec & 0xFF;

    return '#' . pad_hex( dechex( $r ) ) . pad_hex( dechex( $g ) ) . pad_hex( dechex( $b ) ) ;
}

function pad_hex( $val ) {  
    return strlen( $val ) == 1 ? str_pad(dechex( $val ), 2, '0', STR_PAD_LEFT) : $val;
}

?>

    Just had a bit more of a play around with it and here’s the same achieved with canvas and jQuery. It could easily be done without jQuery though.

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Test</title>
    <script src="http://code.jquery.com/jquery-1.7.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {  
        var canvas = document.getElementById("myCanvas");  
        var ctx = canvas.getContext("2d");  

        var image = new Image();  
        image.src = "image.jpg";  
        $(image).load(function() {  
            ctx.drawImage(image, 0, 0);

            var imageData = ctx.getImageData(0, 0, 50, 39);  
            var pixels = imageData.data;

            ctx.clearRect(0, 0, canvas.width, canvas.height);
            $('canvas').remove();

            for (var i = 0, n = pixels.length; i < n; i += 4) {
                var r = pixels[i  ] // red
                var g = pixels[i+1] // green
                var b = pixels[i+2] // blue

                // i+3 is alpha (the fourth element)
                $('body').append('<div style="width:1px;background:rgb('+pixels[i  ]+','+g+','+b+');height:1px;float:left;"></div>');
                if( i % ( 4 * imageData.width ) == 0) {
                    //alert(i);
                    $('body').append('<div style="clear:both;"></div>');
                }
            }
        });
    });  
    </script>
  </head>
  <body>
    <p><canvas style="display:none;" id="myCanvas" width="350" height="250"></canvas></p>
  </body>
</html>
    • 0