A Long Shot, But Might As Well Ask

SpicyDuck

SpicyDuck

SpicyDuck

Soldato
Joined
10 Dec 2003
Posts
6,348
Is there any such tool you know about, that can take an image, count every pixel, get the hex colour value of each pixel and then output all those values as text?

Would it even be possible to do something like this? I'm guessing you can't, but would it be possible in PHP?

I have something very interesting I want to do, but zooming into an image and getting every pixel value is extremely tiresome and slow. Does anyone have any ideas on how I could automate this process?

Thanks.
 
Haha, nope - it's not to store an image pixel by pixel in a Database. :p

I need a list of RGB colours that are taken from an image starting from the top left, and reading to the bottom right. The idea then, is to create a div with a class value (ex. x10y7) would mean 10 across and 7 down.

So then I need to autogenerate a list, like so:

Code: 
<div class="[imagename] x10y9"></div>

with autogenerated CSS that accompanies it, such as:

Code: 
div.x10y9 {
	position: relative;
	width: 1px;
	height: 1px;
	float: left;
	background-color: (Insert value, relative to the name);
}

So the idea then, is that if I have a 640x480px image, I could duplicate that image pixel by pixel with DIVs, 1px in size and with the appropriate background color.

Then I can get to work on making it useful, which I wil share once done. ;) - providing I can acheive what I'm thinking.
 
Here's a mock-up I currently have. It would be great if it was all done in PHP, as I plan for it to be a web-based application in the end.

Code: 
<?php

	$source = ImageCreateFromPng("css/images/cutepixel.png");

	$x = 18;
	$y = 20;

	$rgb = imagecolorat($source, $x, $y);
			
		$red = ($rgb >> 16) & 0xFF;
		$green = ($rgb >> 8) & 0xFF;
		$blue = $rgb & 0xFF;

	$cssrgb = "rgb(" . $red . "," . $green . "," . $blue . ")";

	echo '<div class="cutepixel h' . $x . 'v' . $y . '" style="position: relative; width: 100px; height: 100px; float: left; background-color: ' . $cssrgb . ';"></div>';

?>

That's pretty much all I want. I just need to stick it in a loop to find the value of each pixel and output the relevant HTML.
 
Last edited:
Dj_Jestar said:
Cool project/challenge though.
Click to expand...

The above + Ajax = 'dynamic locally-generated images' or 'DLGI'

The Ajax is the fun part. Real-time image manipulation. Well, I'm hoping, eh? :o :D

If all goes well, I hope to make it into a nice .dlgi format for the web. The idea is that an image, can be a lot more than a static visual 'thing' - it can be a dynamic user-manipulated locally-generated 'object', in real-time.

I hope. Haha.
 
Haircut said:
You do realise that given the sample CSS you posted that for a 640x480 image it would generate a CSS file that's over 42 megs?
Click to expand...

Yeh, filesize was something I was worrying about. :p :D

It's all just a project at the moment, and I hope to find methods to overcome any problems I might face. Like 42MB image sizes. :p
 
Inquisitor said:
Good ;)

Btw, I did only what you first asked for in that program. It doesn't record the original dimensions of the image or output the colour values as CSS; just the raw hex values separated by spaces.
Click to expand...

Yeh, I just noticed this. I've done exactly the same in PHP, so I think I'll stick with that. I just need to add an RGB > HEX conversion then stick it in a loop and create the imagename.php/relative.css and relevant folders. Then I can add the Ajax and make the image editable.

I guess it'll be like a web-based amateur Photoshop, with 1 or 2 tools at first. My plan is to use PHP to edit the hex values, thus allowing the user to edit the hue, saturation, brightness, etc of an image overall. Image size is going to be a huge issue though, I think. Especially with larger images.

The idea is that no one has to install software or plugins to perform the most basic of tasks online. You can just upload an image and crop, resize, brighten or whatever and then a new image will be generated with the changes.
 
Last edited:
You must log in or register to reply here.
Back
Top Bottom