GD Image Modification

[marcus]

I have a 150x35 PNG image that I want to have be completely transparent to the actions after it.

 

The background color on the PNG is white, how can I make all that transparent (the white) so that I can add my own background color to it?

 

What I have: http://i27.tinypic.com/14t0kxy.png

What I want: http://i27.tinypic.com/mkizjp.png (roughly)

 

code:

 

<?php
header("Content-type: image/png");

$width = 150;

// ALLOWED COLORS and IMAGES
$g_com = range(0,100);
$g_allowed = array('black','white','red','blue','yellow','green','pink','grey');
$g_allowed_img = array('np');


// COMPLETION
$com = (int)$_GET['com'];
$com = (!is_numeric($com) || !in_array($com,$g_com) || !$com) ? "0" : $com;

// GOAL
$goal = $_GET['goal'];
$goal = (!in_array($goal,$g_allowed_img) || !$goal) ? "np" : $goal;

// TEXT COLOR
$g_txt_color = $_GET['color'];
$g_txt_color = (!in_array($g_txt_color,$g_allowed) || !$g_txt_color) ? "black" : $g_txt_color;

// BG COLOR
$g_bg_color = $_GET['bcolor'];
$g_bg_color = (!in_array($g_bg_color,$g_allowed) || !$g_bg_color) ? "white" : $g_bg_color;

// COMPLETE COLOR
$g_com_color = $_GET['ccolor'];
$g_com_color = (!in_array($g_com_color,$g_allowed) || !$g_com_color) ? "green" : $g_com_color;

// NON-COMPLETE COLOR
$g_non_color = $_GET['ncolor'];
$g_non_color = (!in_array($g_non_color,$g_allowed) || !$g_non_color) ? "red" : $g_non_color;

// RGB CODES FOR COLORS
$r = array(
'black' => '0',
'white' => '255',
'red' => '255',
'blue' => '51',
'yellow' => '255',
'green' => '46',
'pink' => '255',
'grey' => '200'
);
$b = array(
'black' => '0',
'white' => '255',
'red' => '0',
'blue' => '0',
'yellow' => '255',
'green' => '139',
'pink' => '0',
'grey' => '200'
);
$g = array(
'black' => '0',
'white' => '255',
'red' => '0',
'blue' => '255',
'yellow' => '0',
'green' => '87',
'pink' => '153',
'grey' => '200'
);

// GOAL FILE NAMES
$goals = array(
'np' => 'np.png'
);

$im = imagecreatefrompng("images/" . $goals[$goal]);
#$im = imagecreate($width, 35) or die("Cannot create image!");

$bg_color = imagecolorallocate($im, $r[$g_bg_color], $b[$g_bg_color], $g[$g_bg_color]);
$txt_color = imagecolorallocate($im, $r[$g_txt_color], $b[$g_txt_color], $g[$g_txt_color]);

$fill_g = ($com / 100) * 100;
$fill_r = (100 - $fill_g) + $fill_g;

$rect_color_g = imagecolorallocate($im, $r[$g_com_color], $b[$g_com_color], $g[$g_com_color]);
$rect_color_r = imagecolorallocate($im, $r[$g_non_color], $b[$g_non_color], $g[$g_non_color]);


imagefilledrectangle($im, 47, 22, $fill_g + 47, 32, $rect_color_g);
if ($com != 100) {
    imagefilledrectangle($im, $fill_g + 47, 22, $fill_r + 47, 32, $rect_color_r);
}

$font = "tahoma.ttf";
$string = round($com) . "% Complete!";
$string = ($com < 100) ? round($com) . "% Complete!" : "Accomplished!";
$x = ($com < 100) ? 77 : 82;

imagettftext($im, 8, 0, $x, 20, $txt_color, $font, $string);

imagepng($im);
imagedestroy($im);
?>

 

MOD EDIT: code tags added.

[cooldude832]

How are you going to define what is background and what isn't in the eyes of php?

In the case of your image the money bag/percent will not be Transparent, but the rest is so to speak of

 

If the elements are constant Money bag status bar text you can probably do a pixel on pixel white out to transparent if you are that methodical

[marcus]

Well the URL is set up with mod rewrite:

 

goal_GOALIMAGE_%COMPLETION_TXTCOLOR_BGCOLOR_COMPLETEDBARCOLOR_NONCOMPLETEDBARCOLOR.png

 

the "goalimage" in this case is the money bag. The only natural aspects of the image that are changed are the colours and the goal image.

 

How would I do pixel on pixel white out to transparency?

 

Is it possible to add an existing image to another image?

[Barand]

You've been around here long enough to know how to use code tags

[marcus]

I like using the PHP tags =/ (plus i've always used the php tags)

[helraizer]

If you want the white colour transparent you'd do this:

 

$im = imagecreatefrompng("images/" . $goals[$goal]); // create image

$white = imagecolorallocate($im, 255,255,255); //define a colour

$trans_white = imagecolortransparent($im, $white); // define the colour as transparent.

 

then to your last question:

 

look up imagecopymerge, that allows you to insert one image ontop of another, at varying levels of transparency (0 being invisible, 50 being faded in, 100 being the exact image on the main image.

 

Hope that helps.

Sam

[cooldude832]

well if it is going to be the same draw out by had an image that will be like an outline of the transparent parts and then use

http://us3.php.net/manual/en/function.imagecopymerge.php

 

to merge it with the dynamically made one.  Just a shot in the dark but might work

 

How you make the outliner is going to be complicated, and you might need 2-3 outliners for top/left/bottom/right as they have to be continous squares, but it could save you doing a 1 pixel at a time vs beable to knock out 100X1 rows across and a 20x15 box for say in 1 shot.

[Barand]

I like using the PHP tags =/ (plus i've always used the php tags)

 

Fine for a few lines only.

 

But do I take that to be a refusal to comply with code tags?

[marcus]

I tried both options and the background for what should be red is still white.

 

I got the money bag to merge onto it, but it's still taking the red background and turning it white.

 

<?php
// hehe barry
header("Content-type: image/png");

$width = 150;

// ALLOWED COLORS and IMAGES
$g_com = range(0,100);
$g_allowed = array('black','white','red','blue','yellow','green','pink','grey');
$g_allowed_img = array('np');


// COMPLETION
$com = (int)$_GET['com'];
$com = (!is_numeric($com) || !in_array($com,$g_com) || !$com) ? "0" : $com;

// GOAL
$goal = $_GET['goal'];
$goal = (!in_array($goal,$g_allowed_img) || !$goal) ? "np" : $goal;

// TEXT COLOR
$g_txt_color = $_GET['color'];
$g_txt_color = (!in_array($g_txt_color,$g_allowed) || !$g_txt_color) ? "black" : $g_txt_color;

// BG COLOR
$g_bg_color = $_GET['bcolor'];
$g_bg_color = (!in_array($g_bg_color,$g_allowed) || !$g_bg_color) ? "white" : $g_bg_color;

// COMPLETE COLOR
$g_com_color = $_GET['ccolor'];
$g_com_color = (!in_array($g_com_color,$g_allowed) || !$g_com_color) ? "green" : $g_com_color;

// NON-COMPLETE COLOR
$g_non_color = $_GET['ncolor'];
$g_non_color = (!in_array($g_non_color,$g_allowed) || !$g_non_color) ? "red" : $g_non_color;

// RGB CODES FOR COLORS
$r = array(
'black' => '0',
'white' => '255',
'red' => '255',
'blue' => '51',
'yellow' => '255',
'green' => '46',
'pink' => '255',
'grey' => '200'
);
$b = array(
'black' => '0',
'white' => '255',
'red' => '0',
'blue' => '0',
'yellow' => '255',
'green' => '139',
'pink' => '0',
'grey' => '200'
);
$g = array(
'black' => '0',
'white' => '255',
'red' => '0',
'blue' => '255',
'yellow' => '0',
'green' => '87',
'pink' => '153',
'grey' => '200'
);

// GOAL FILE NAMES
$goals = array(
'np' => 'np.png'
);

#$im = imagecreatefrompng("images/" . $goals[$goal]);
$im = imagecreate($width, 35) or die("Cannot create image!");
$goal_image = imagecreatefrompng("images/" . $goals[$goal]);
$white = imagecolorallocate($im, 255,255,255);
$trans_white = imagecolortransparent($goal_image, $white);
imagecopy($im, $goal_image, 0, 0, 0, 0, 150, 35);


$bg_color = imagecolorallocate($im, $r[$g_bg_color], $b[$g_bg_color], $g[$g_bg_color]);
$txt_color = imagecolorallocate($im, $r[$g_txt_color], $b[$g_txt_color], $g[$g_txt_color]);

$fill_g = ($com / 100) * 100;
$fill_r = (100 - $fill_g) + $fill_g;

$rect_color_g = imagecolorallocate($im, $r[$g_com_color], $b[$g_com_color], $g[$g_com_color]);
$rect_color_r = imagecolorallocate($im, $r[$g_non_color], $b[$g_non_color], $g[$g_non_color]);


imagefilledrectangle($im, 47, 22, $fill_g + 47, 32, $rect_color_g);
if ($com != 100) {
    imagefilledrectangle($im, $fill_g + 47, 22, $fill_r + 47, 32, $rect_color_r);
}

$font = "tahoma.ttf";
$string = round($com) . "% Complete!";
$string = ($com < 100) ? round($com) . "% Complete!" : "Accomplished!";
$x = ($com < 100) ? 77 : 82;

imagettftext($im, 8, 0, $x, 20, $txt_color, $font, $string);

imagepng($im);
imagedestroy($im);
?>

[cooldude832]

Okay you gave me an idea

 

Start with a transparent 140x150 (or what ever it is) box

Merge on top the moneybag

Merge on top of that merged image the status bar

Merge on top of that the Text label

 

That image is what you want no need to recut stuff

 

 

[helraizer]

this code:

 

<?php

$img = imagecreate(150,35);
$black = imagecolorallocate($img, 0,0,0);
imageFill($img, 0, 0, $black);

$im = imagecreatefrompng("14t0kxy.png");
$white = imagecolorallocate($im, 255,255,255);
$trans_white = imagecolortransparent($im, $white);

imagecopymerge($img, $im, 0,0,0,0,150,35,100);

header("Content-type: image/png");
imagepng($img);
imagepng($img, "image.png");
imagedestroy($img);
imagedestroy($img);
?>

 

produces this:

 

 

Slight oddity with the pink text but you get the idea.

 

Sam