Use PHP to split an image into pixel divs

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)

Answers


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.

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

Need Your Help

Typescript: push not available on custom typed array

javascript arrays typescript

Using Javascript with Typescript (v1.4.1) I have a custom type as follows:

Create pretty url's with GET variables

php regex apache .htaccess mod-rewrite

At this moment I have a situation in which pretty url's are rewritten so that everything goes by the index.php, while maintaining the $_GET variables. The htaccess looks as follows:

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.