• 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


#1
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;
}
?>
 
#3
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
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.