Managing PNG/JPEG graphics with GD

PHP programming forum. Ask questions or help people concerning PHP code. Don't understand a function? Need help implementing a class? Don't understand a class? Here is where to ask. Remember to do your homework!

Moderator: General Moderators

Post Reply
tarkus69
Forum Newbie
Posts: 3
Joined: Wed Mar 19, 2003 11:42 am

Managing PNG/JPEG graphics with GD

Post by tarkus69 »

Hello:

I have PHP 4.3.1, so I also have the lattest version of GD/GD2.

What I want to do -but I can't- is: having a grayscale photo of an object over white, by appliying a kind of mask just "paint" the photo with a choosed color (regarding opacity, etc. but this is not the point). It's the common application of "custom" shopping (to see different colors of a car before buy it, but using the same photo).

I tried 'a lot of' things and combinations. Mainly I used ImageColorTransparent(), ImageCopy(), ImageCopyMerge(), ImageFill(), but without luck... Example: I load the image, then I set white with ImageColorTransparent() and tried to fill the result with ImageFill(), etc.

I you could help me I'll be grateful.

Regards,

Tarkus
User avatar
volka
DevNet Evangelist
Posts: 8391
Joined: Tue May 07, 2002 9:48 am
Location: Berlin, ger

Post by volka »

hawk
Forum Newbie
Posts: 3
Joined: Thu Mar 20, 2003 6:58 am
Contact:

Post by hawk »

I recommend you to use ImageMagick instead of GD
Besides all you'll have high-quality images after processing!

http://www.imagemagick.org/
pootergeist
Forum Contributor
Posts: 273
Joined: Thu Feb 27, 2003 7:22 am
Location: UK

Post by pootergeist »

if you just wanted to change the white to (int red, int green, int blue) a very simple

$colour_index = imagecolorclosest($image_pointer, 255, 255, 255);
imagecolorset($image_pointer, $colour_index, $int_red, $int_green, $int_blue);

would do.

if you want to go a step further and add coloured shading relative to the greyscale density - just interate through the image palette and return the red/green/blue - add a proportional rgb within min(255,max(0,$ret_colour_level)) using the imagecolorsforindex() function.

with GD2+ you'll get as good (if not better) results than imagemagick (results even rivalling script-fu) plus you have the knowledge that you are using a module directly supported by (and contributed to) the great Rasmus himself [all hail] :D
pootergeist
Forum Contributor
Posts: 273
Joined: Thu Feb 27, 2003 7:22 am
Location: UK

Post by pootergeist »

just found out that imagecolorsforindex doesn't work from imagecreatefromType calls - only from imagecreate(w,h) - so you would need to do something where you iterated the image a pixel at a time and reassigned an allocated colour to every pixel you tested.

for example

http://www.teckis.com/compiled_files/cr ... =155&b=-55

where r= an integer that is added to the red saturation (negative would subtract) and g= is the green and b= is the blue.

Note: the process is nasty resource hungry so I haven't posted code - let me know your exact proposed usage and I'll think about sending you the function.
tarkus69
Forum Newbie
Posts: 3
Joined: Wed Mar 19, 2003 11:42 am

Post by tarkus69 »

Thanks for your replies!!!

What I'm trying to do is EXACTLY THE SAME as Nike ID site do. You could see what I need, in example, here: http://nikeid.nike.com/configurator.jsp ... Id=shox_r4

This is what I'm guessing they do there:

1. They prepare a 'base' image in grayscale of every part to be painted (kinda layered images) with, in example, white as bg color.
2. The user choose a color for every part
3. The program 'paint' each part with corresponding color <--- This is the hard part I cannot resolve! I need to paint just the grayed image, the product itself, and not the other part (white part), that could be act as transparent.
4. The resulting images are merged and sent to the browser.

If you have a different workaround to do the same, It will be welcomed...

Note: I'm sorry, I know my language boundaries, I'm desperated because I have a demo in few days (and volka, I've got your URL, interesting, I bookmarked it, thanks! ;-)

Best regards,

Tarkus
Last edited by tarkus69 on Thu Mar 20, 2003 4:37 pm, edited 1 time in total.
pootergeist
Forum Contributor
Posts: 273
Joined: Thu Feb 27, 2003 7:22 am
Location: UK

Post by pootergeist »

I'm guessing (and this might be slightly biased due to viewing properties on the image) that they are utilizing alpha channel transparency available in .png files and simply stacking the image together from the back forward.

Apparently Andrew Hull has been doing some work in recent GD builds to do with png alpha channels so I assume they are working pretty well. Notes about 7bit alpha support litter the boutell.com release notes pages, which (as GD doesn't do gif) may be partly png based (certainly .gd2 and .gd file format based).

I haven't as yet had much of a chance to explore transparencies in GD and am certain that any exploration would be well over two days in duration.

You'd only really get anywhere near a decent result if you used either the native gd/gd2 file format or png for this. You would also need to make a stacking overlay system with transparency. Even with my understanding of GD I wouldn't like to have to have something running in 2 days that looked great.

A rough .png idea that ignores white

http://www.teckis.com/compiled_files/cr ... &g=0&b=105

again with r= red colour level / g = green etc.
tarkus69
Forum Newbie
Posts: 3
Joined: Wed Mar 19, 2003 11:42 am

Post by tarkus69 »

Sound reasonably, I think stacked images of PNGs with alpha channel set to maximum (0% opacity) could be the solution.

I saw your sample, it's ok! But what functions do you use? Do you begin with a transparent PNG-24? or Do you use a server-killer pixel-to-pixel method (imagecolorat/imagesetpixel)?

I was wondering If It's ignoring white, why is happening this: http://www.teckis.com/compiled_files/cr ... 127&b=-127. It's strange, sometimes (just a few) the dark gray shadow appears "painted", others, does not, why?.

I know this is just an abuse, but please, could you paste here that code, I cannot obtain the same behavior as you do!!! Thanks a lot!

Best regards,

Tarkus
pootergeist
Forum Contributor
Posts: 273
Joined: Thu Feb 27, 2003 7:22 am
Location: UK

Post by pootergeist »

fixed that glitch :)

must have been tired last night as I was testing for white after adding the saturation values :roll:

as truecolour images are ignoring imagecolorsforindex within a palette iterated loop [ie for( 0 to palette size ) reset index colour] I had to use a setpixel() approach. If I had stepped the image a pixel at a time and used imagecolorset , further pixels of that colour would have incremented the saturation additions.

anyway (promise you will NOT abuse this code snip as it is resource enemy #1 and your host will grimace a tad and I will not be held responsible if he/she disables GD after you use it) code below

script removed now - to hopefully avoid misuse.

note: you might want to sling in an is_null test to stop the process if the image type isn't compatible - perhaps also change the createfromGIF call to NULL too as GD2 will not do that.

a .png image 24bit will hold #FFFFFF perfectly, so I just used that as the 'do not colourize this colour) reference
Post Reply