Jump to content

GD Library - Colorize Non-transparent areas in image


mouseywings

Recommended Posts

I'm wondering if the GD library is capable of coloring ONLY the non-transparent areas in an image. I had this image white, black, and every other color under the moon, but could only get GD to color the entire canvas (width and height) of the image with an opacity over it. I'm merging many layers on top of each other so I can't afford to color the entire square and lower the opacity and do some weird multiply stuff.

 

qvoPPYn.png

 

That's the image above. Then I have some lineart, markings, eye color, etc. So I had all my possible colors white areas that I layer on top of eachother. I want to color the entire non-transparent areas with a color (dynamic).. so I can't just color it in Photoshop and then upload it or else I would literally have millions of possibilities for every single color and shade..

 

Thanks for any help. I was trying to go with ImageMagick if GD isn't capable, but I can't even get that downloaded in my Wamp. I'm using 64 bit Wamp so I have no idea if that does something or whatever. I can get it installed on my computer and run it via command line, but I can't get it to work and render images in my Wamp files... can't ever find a .dll that works.

Link to comment
Share on other sites

That was fun!

 

Using GD I managed to get the set of four images from your two files (mask and rabbit). The second image was using image colorize filter with same values as bunny #4. (I used the blue background so I could check the transparent areas)

 

It may need some refining but at least it's a start.

 

the HTML for the four images is

<img src='mousy2_img.php?r=200&g=120&b=120' border='0' width='200' height='200' alt='output'>
<img src='mousy2_img.php?r=0&g=155&b=0' border='0' width='200' height='200' alt='output'>
<img src='mousy2_img.php?r=0&g=0&b=155' border='0' width='200' height='200' alt='output'>
<img src='mousy2_img.php?r=0&g=150&b=150' border='0' width='200' height='200' alt='output'>

and code for mousy2_img.php

<?php
$colourToAdd = array ('red'=>$_GET['r'], 'green'=>$_GET['g'], 'blue'=>$_GET['b'], 'alpha'=>0);

$im = imagecreatefrompng('mousyorig.png'); // your rabbit
$mask = imagecreatefrompng('mousy.png');   // your mask overlay
$w = imagesx($im);
$h = imagesy($im);


$mk = imagecolorat($mask,100,100);
$trans = imagecolorallocate($im,1,1,1);
imagecolortransparent($im, $trans);
imagealphablending($im,0);

//
// scan mask image
//
for ($y=0; $y<$h; ++$y) {
    for ($x=0; $x<$w; ++$x) {
        if (imagecolorat($mask, $x, $y) != $mk) {
            imagesetpixel($im,$x,$y,$trans);      // if transparent in mask
        }                                         // ensure transparent in image
        else {
            addColour($im,$x,$y,$colourToAdd);    // apply chosen color to pixel
        }                                         // using same intensity as original 
    }
}

function addColour($image, $x, $y, $add)
{
    $col = imagecolorat($image, $x, $y);
    $c = imagecolorsforindex($image, $col);
    
    foreach ($c as $k=>&$v) {
        $v  =  $k!='alpha' ? $add[$k]*$v/255 : $add[$k];
    }
    $z = imagecolorallocatealpha($image,$c['red'], $c['green'], $c['blue'], $c['alpha']);
    imagesetpixel($image,$x,$y,$z);
}

header("Content-Type: image/png");
imagepng($im);
imagedestroy($im);
imagedestroy($mask);
?>

post-3105-0-37963100-1411404513_thumb.png

post-3105-0-26550400-1411404526_thumb.png

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.