Demo: scaling parts of an image using DHTML
The exact source of
the demo can be found on this page.
It can be pretty slow on larger images, so there's some tiny ones and one bigger sample for patient types.
The demo proves this is useful for small selections of images and it is a 'study' for a new WYSIWYG feature in TrueColor:
interactively change color of some selected pixels.
PHP source of of the layer creator demo
<?
class divMaker{
// readonly
var $height;
var $width;
// to set
var $posx=0;
var $posy=0;
var $scale=10;
var $size;
var $offset=100;
function makeDivs($dirfile){
$img = imagecreatefromgif($dirfile);
$this->width = imagesx($img);
$this->height = imagesy($img);
$this->size=max($this->width,$this->height);
$ycounter=0;
for($i=$this->posx;$i<$this->posy+$this->size;$i++){
$xcounter=0;
for($j=$this->posy;$j<$this->posx+$this->size;$j++){
$col = imagecolorat($img, $j, $i);
$rgb = imagecolorsforindex($img, $col);
if ($rgb["red"]>0)$hred = dechex($rgb["red"]); else $hred = "00";
if (strlen($hred)<2)$hred = "0".$hred;
if ($rgb["green"]>0)$hgreen = dechex($rgb["green"]); else $hgreen = "00";
if (strlen($hgreen)<2)$hgreen = "0".$hgreen;
if ($rgb["blue"]>0)$hblue = dechex($rgb["blue"]); else $hblue = "00";
if (strlen($hblue)<2)$hblue = "0".$hblue;
$hexcolor = strtoupper($hred.$hgreen.$hblue);
$divstr .= "<div style=\"position:absolute;left:";
$divstr .= ($xcounter*$this->scale+$this->offset)."px;
top:".($ycounter*$this->scale+$this->offset)."px;
width:".$this->scale."px;
height:".$this->scale."px;";
$divstr .= "background-color:#".$hexcolor.";\"></div>";
$xcounter++;
}
$ycounter++;
}
//$newcontent = join($newchars,"");
imagedestroy($img);
return $divstr;
}
}//class
function writeOptions($min,$max,$sel=0)
{
for($i=$min;$i<=$max;$i++){
$retval .= "<option value=".$i;
if ($i==$sel) $retval .= " selected";
$retval .= ">".$i;
}
return $retval."</option>";
}
function getPix($dir)
{
// opening directory for reading
$handle = opendir($dir);
// reading all filenames
while($file = readdir($handle)){
// skip directories
if (!is_dir($file)){
// if the file is not an image, getimagesize won't result (or error :-)
$img = @getimagesize($dir.$file);
if ($img){
$filenames[] = $file;
}
}
}// end while
@usort($filenames, "cmp");
return $filenames;
}
function getFiles($dir,$newimage="")
{
$files = getPix($dir);
usort($files, "cmp");
//reset($files);
for($i=0;$i<sizeof($files);$i++){
$retstr .= "<option";
if ($newimage && $files[$i]==$newimage) {
$retstr .= " selected";
$selected = true;
}
$retstr .= ">".$files[$i];
}
$retstr .= "</option>";
return $retstr;
}
$dir = "images/";
if(!$scale)$scale=20;
if ($newname){
$layers = new divMaker;
$layers->scale = $scale;
$divstr = $layers->makeDivs($dir.$newname);
}
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Image to Layer Demo</title>
</head>
<body>
<form>
<? if ($layers){ ?>
Image: <img src="<?=$dir.$newname?>">
<? } ?>
<select name="newname">
<option value="">Select image
<?=getFiles($dir,$newname)?>
</select>
<? if ($layers){ ?>
( width: <?=$layers->width?> px
height: <?=$layers->height?> px )
<? } ?>
Scale
<select name="scale">
<?=writeOptions(1,100,$scale)?>
</select> : 1
<input type="submit" value="Show">
</form>
<? if($divstr)echo$divstr; else{?>
This demo shows how DHTML layers can made out of the pixels of an original GIF image.<BR/>
These layers could for instance change color using javascript. This supplies a possible way to create a pixel based editor for parts of an image in TrueColor 2.0.
<?}?>
</body>
</html>
Other PHP samples:
Simple Meta Content Refresh Slideshow and Image Browser