Solved

PHP-created button background graphic messed up

Posted on 2011-03-03
9
484 Views
Last Modified: 2013-11-19
I have been playing with PHP image generation, learning the functionality and tried to create a button using my own background graphic (png image) created in photoshop, but the button graphic comes out all messed up, any suggestions why this is happening. Have you seen it before. I am attaching the original graphic and the graphic returned by PHP for comparison. Thank you all for your advice beforehand.
pre-designed graphic to be used for PHP button graphic produced by PHP generation
0
Comment
Question by:czechmate1976
9 Comments
 
LVL 4

Expert Comment

by:JayDiablo
ID: 35030071
Seems like transparency/alpha channel issue, perhaps you need these options set?

http://php.net/manual/en/function.imagealphablending.php

To false,

http://php.net/manual/en/function.imagesavealpha.php

set to true.

Similar question with these values set claimed to have resolved:

http://stackoverflow.com/questions/32243/can-png-image-transparency-be-preserved-when-using-phps-gdlib-imagecopyresampled

Probably helpful to see some of the code you're using if this doesn't help.
0
 
LVL 27

Expert Comment

by:Lukasz Chmielewski
ID: 35030622
Can you post the code ? This seems like the button is duplicating it's middle part (is it divided into left middle and right) ?
0
 
LVL 7

Expert Comment

by:Vimal DM
ID: 35034133
Hai,

1) Since it is of PNG file,it will be like this only in different browsers view,for that,use the " pngFix.js " file (just download the file from net)

2) Enough that you include the file where ever you have used the png images,if not working go throw the " pngFix.js " file and make simple modification

3) If you have include the png image on CSS, relating to that,there is also a possibility to include the " js " file functionality into CSS,where the include file will have different format,try this to


hope you have an idea to fix this up

0
Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

 

Author Comment

by:czechmate1976
ID: 35035418
Thanks for all your suggestions, guys. Just going to try them all and will let you know.
Sorry for the delay in response.
0
 

Author Comment

by:czechmate1976
ID: 35035593
Just posting the code producing this, in case some of you guys would like to have a look. It's really just a test for me, so it won't be perfect
$button_text = $_POST['button_text'];
		$colour = $_POST['colour'];
		
		$im = imagecreatefrompng('images/' . $colour . '-button.png');
		
		if (!$im)
		{
			$error = 'Could not create image.';
		}
		
		$width_image = imagesx($im);
		$height_image = imagesy($im);
		
		//echo $width_image . "<br />";
		//echo $height_image . "<br />";
		// the images need 20 a 5 pixel margins from the edge of the image
		// Set up the button measurements without the margins
		$width_image_wo_margins = $width_image - (2 * 20);
		$height_image_wo_margins = $height_image - (2 * 5);
		
		// button height 50pixels - (2*5 margins) = allowed max font size 40
		$font_size = 30;
		putenv('GDFONTPATH=/Library/Fonts');
		$fontname = 'Tahoma';
		
		// test the size of the text by looking at the bounding box [bbox] of the text.
		// loop, decrementing the font size at each iteration, until the submitted text
		// will fit on the button reasonably: 
		do {
			$font_size--;
			// find out the size of the text at that font size
			$bbox = ImageTTFBBox($font_size, 0, $fontname, $button_text);
			
			$right_text = $bbox[2]; // right co-ordinate
			$left_text = $bbox[0]; // left co-ordinate
			$width_text = $right_text - $left_text; // how wide is it?
			$height_text = abs($bbox[7] - $bbox[1]); // how tall is it?
			//echo '$font_size = ' . $font_size . '<br />';
			//echo '$fontname = ' . $fontname . '<br />';
			//echo '$height_text = ' . $height_text . '<br />';
			//print_r($bbox);
			
		}
		while ($font_size>8 &&
			  (	$height_text>$height_image_wo_margins || $width_text>$width_image_wo_margins ));
			  
		if ($height_text>$height_image_wo_margins || $width_text>$width_image_wo_margins) 
		{
			//no readable font size will fit on button
			$error = '<p style="color: red;">Text given will not fit on button.</p>';
		} 
		else 
		{
		
			// all ok, work out the base position for the start of the text
			// this is the midpoint of the available space
			$text_x = $width_image/2.0 - $width_text/2.0;
			$text_y = $height_image/2.0 - $height_text/2.0;
			
			//Add correction factors to account for the baseline relative coordinate system
			// These correction factors allow for the baseline and a little adjustment because
			// the image is a bit "top heavy";
			if($left_text < 0) 
			{
				$text_x += abs($left_text); 		// 	add factor for left overhang
				$above_line_text = abs($bbox[7]); 	//	how far above the baseline
				$text_y += $above_line_text;		// 	add baseline factor
				$text_y -= 2;						//	adjustment factor for shape o our template
			}
			// set up the text colour
			$white = imagecolorallocate($im, 255, 255, 255);
			// draw the text onto the button
			ImageTTFText($im, $font_size, 0, $text_x, $text_y, $white, $fontname, $button_text);
			//display image in browser
			Header ('Content-type: image/png');
			ImagePNG($im);
			imagedestroy($im);

Open in new window

0
 
LVL 34

Accepted Solution

by:
Slick812 earned 250 total points
ID: 35039613
greetings  czechmate1…  You have much code there to do this, I looked at the code you have , and without testing, I would say that you DO NOT save the transpaency of your PNG image, GD is very specific about setting and saving the Alpha transparency of PNG images. .

You will need to add imagesavealpha( ) before you output the image, like this - -

header ('Content-type: image/png');
imagesavealpha($im, true);
imagepng($im);

ask questions if you need more help, or this does not work . . . .
0
 

Author Comment

by:czechmate1976
ID: 35041393
Thanks a lot for this, Slick, I really had no idea that the tranparency does need some extra considerations and the book I am following did not even touch that. So again, thanks a lot, I'll come with some questions tomorrow if needed :)
0
 

Author Closing Comment

by:czechmate1976
ID: 35043674
thanks a lot for your solution, it was absolutely spot on and worked immediately. I definitely have to look a bit more into GDs documentations rather than just follow books (which did not mention any of the transparency issues) Thanks a lot again!!
0
 

Author Comment

by:czechmate1976
ID: 35043679
0

Featured Post

Active Directory Webinar

We all know we need to protect and secure our privileges, but where to start? Join Experts Exchange and ManageEngine on Tuesday, April 11, 2017 10:00 AM PDT to learn how to track and secure privileged users in Active Directory.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

This article discusses how to create an extensible mechanism for linked drop downs.
Since pre-biblical times, humans have sought ways to keep secrets, and share the secrets selectively.  This article explores the ways PHP can be used to hide and encrypt information.
The viewer will learn how to count occurrences of each item in an array.
Learn the basics of inputting and editing your text components in Prezi. We will cover how to set styles, position, and group your text components. In your Prezi editor, click anywhere on the canvas to add text: A flashing cursor informs you that yo…

820 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question