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