Member Offer
  1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

[PHP] Convert an Image to a CSS and HTML Pixelated Replica

Discussion in 'Website Design Forum:' started by Goreki, Jun 30, 2010.

  1. Goreki

    Goreki Member

    I started out doing this manually; re-creating an image with CSS and HTML. It was a pain in the arse, as you can imagine. Very tedious and frustrating. So I come up with a quick script to avoid doing this manually.

    It was more of a proof of concept than anything and It doesn't have any practicality but it will certainly has it's uses depending on where and how you apply it if you do it right.

    There are some examples of it working here: http://goreki.com/to.pxexamples

    On Forrst

    PHP:
    <?php 

    //*****************************
    //
    // This script takes an image and creates
    // a pixelated version using css and div tags
    //
    // USAGE:
    //
    // createPixels($pxsize,$image);
    // $pxsize    - the size of the pixels you want to create.
    // $image    - the location on the image to pixelate.
    //
    // http://www.goreki.com
    // http://www.forrst.com/people/goreki
    //
    //*****************************

    createPixels($pxsize,$image);

    function 
    toHex($r,$g,$b) {    
            
            
    $r dechex($r);
            
    $g dechex($g);
            
    $b dechex($b);
            
            if(
    strlen($r) <= 1) { $r "0".$r; }
            if(
    strlen($g) <= 1) { $g "0".$g; }
            if(
    strlen($b) <= 1) { $b "0".$b; }
            if(
    strlen($r) == 0) { $r "00".$r; }
            if(
    strlen($g) == 0) { $g "00".$g; }
            if(
    strlen($b) == 0) { $b "00".$b; }
            
    $hex $r.$g.$b;
            
            return 
    $hex;
    }

    function 
    createPixels($pxsize,$image) {
            
        echo 
    "<h2>Original</h2>\n";
        echo 
    "<img src=\"".$image."\" />\n\n";
            
        list(
    $width$height$type) = getimagesize($image);
        
        
    // $type
        // 1 = IMAGETYPE_GIF
        // 2 = IMAGETYPE_JPEG
        // 3 = IMAGETYPE_PNG
        
        
    $contentHeight $height+$pxsize;
        
    $contentWidth $width+$pxsize;
        
        
    $pxcount = ($width*$height)/($pxsize*$pxsize); // width * height / pixel
        
    if(strpos($pxcount,".") == true) {
            
    $pxcount round($pxcount);
        } else {
            
    $contentWidth $width;
        }
        
        
    $width $width-$pxsize;
            
        if(
    $type == '1') {
            
    $img imagecreatefromgif($image);
        } elseif(
    $type == '2') {
            
    $img imagecreatefromjpeg($image);
        } elseif(
    $type == '3') {
            
    $img imagecreatefrompng($image);
        }
        
        
    $hexarray;$css;$html;$ta_css;$ta_html;$pixelNum// blank values
        
        
    if($pxsize == '1') {
            
    $x=$pxsize/2;
            
    $y=$pxsize/2;
        } else {
            
    $x=0;
            
    $y=0;
        }
        
        while(
    $y <= $height) {
            
    $rgb imagecolorat($img$x$y);
            
    $colors imagecolorsforindex($img$rgb);
            
    $r = ($rgb >> 16) & 0xFF;
            
    $g = ($rgb >> 8) & 0xFF;
            
    $b $rgb 0xFF;
            
            
    $pixelNum++;
            
            if(
    $x >= $width) {
                
    $x 0;
                
    $y $y+$pxsize;
            } else {
                
    $x $x+$pxsize;
            }
            
            
    $hex toHex($colors['red'],$colors['green'],$colors['blue']);
            if(!
    in_array($hex,$hexarray)) {
                
    $css.= ".c".$hex."{ background-color: #".$hex."; }\n";
                
    $ta_css.=".c".$hex."{ background-color: #".$hex."; }\n";
                
    $hexarray[] = $hex;
            }
            
            
    $html.= "<!-- Pixel:".$pixelNum." / X-Y: ".$x."-".$y." --><div class=\"pixel c".$hex."\"></div>\n";
            
    $ta_html.= "<div class=\"pixel c".$hex."\"></div>\n";
        }
        
        echo 
    "<style type=\"text/css\">\n";
        echo 
    ".pixelContent {width: ".$contentWidth."px; height: ".$contentHeight."px; }\n";
        echo 
    ".pixelContent .pixel {width: ".$pxsize."px;height: ".$pxsize."px;float: left;}\n";
        echo 
    $css;
        echo 
    "</style>\n\n";
        echo 
    "<h2>Pixelated (Pixel Count: ".$pixelNum.")</h2>";
        echo 
    "<div class=\"pixelContent\">\n";
        echo 
    $html;
        echo 
    "</div>";
        
        
    $textarea "<div>\n";
        
    $textarea.= "<h2>CSS & HTML</h2>";
        
    $textarea.= "<textarea cols=\"100\" rows=\"50\">";
        
    $textarea.= "<style type=\"text/css\">\n";
        
    $textarea.= ".pixelContent {width: ".$width."px; height: ".$contentHeight."px; }\n";
        
    $textarea.= ".pixelContent .pixel {width: ".$pxsize."px;height: ".$pxsize."px;float: left;}\n";
        
    $textarea.= ".cffffff{ background-color: #ffffff; }\n";
        
    $textarea.= ".c000000{ background-color: #000000; }\n";
        
    $textarea.= $ta_css;
        
    $textarea.= "</style>\n\n";
        
    $textarea.= "<div class=\"pixelContent\">\n";
        
    $textarea.= $ta_html;
        
    $textarea.= "</div>\n";
        
    $textarea.= "</textarea>";
        
    $textarea.= "</div>\n";
        
        echo 
    $textarea;
    }
    ?>
     
  2. TallPaul

    TallPaul Member

    Nice work :) PHP can be a pain :p
     
  3. Goreki

    Goreki Member

    Thanks, it wasn't the PHP that was a pain. It was trying to manually re-create the image by hand, rather than letting a script do it. I was getting hex values from photoshop, adding it to the stylesheet then to a div; for each pixel. imagine doing that hundreds of times till an image was built up? Absolute pain.
     
  4. TallPaul

    TallPaul Member

    Wow, i see it now, so in reality the logo is made up of hundreds of layers filled with the same colours as the original logo?

    Must have been painstaking process.
     
  5. ralphsaunders

    ralphsaunders Senior Member

    Pretty damn cool... now if we could do it at higher resolution... :p
     
  6. Goreki

    Goreki Member

    I just made an "About" page (well, kind of) on my site using a product of this script: &darr; About | Goreki

    haha...
     
  7. ralphsaunders

    ralphsaunders Senior Member

    Took a long time to load... is that the server working its arse off?
     
  8. Goreki

    Goreki Member

    No idea, when you say long time to load, how long?
     
  9. ralphsaunders

    ralphsaunders Senior Member

    6 seconds from connecting to the server to getting some content...
     
  10. TallPaul

    TallPaul Member

    Loads fine for me :s
     
  11. Goreki

    Goreki Member

    Updated the code to correct some problems, check the first post.
     

Share This Page