Solved

PHP-created button background graphic messed up

Posted on 2011-03-03
9
487 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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
Revamp Your Training Process

Drastically shorten your training time with WalkMe's advanced online training solution that Guides your trainees to action.

 

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

PeopleSoft Has Never Been Easier

PeopleSoft Adoption Made Smooth & Simple!

On-The-Job Training Is made Intuitive & Easy With WalkMe's On-Screen Guidance Tool.  Claim Your Free WalkMe Account Now

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Find RGB colors from a screen. 2 41
How do I Check for duplicate entries in mysql 15 49
Code planning methods/tools? 5 56
Form not executing correctly 1 28
Author Note: Since this E-E article was originally written, years ago, formal testing has come into common use in the world of PHP.  PHPUnit (http://en.wikipedia.org/wiki/PHPUnit) and similar technologies have enjoyed wide adoption, making it possib…
Developers of all skill levels should learn to use current best practices when developing websites. However many developers, new and old, fall into the trap of using deprecated features because this is what so many tutorials and books tell them to u…
Learn how to create interesting presentations by including videos to keep your audience engaged using Prezi. Select "Insert" from the top menu in your Prezi editor: Select "YouTube Video": Paste the video URL into the prompt: "Select "Insert":…
Add visuals to your Prezi to keep your audience engaged. Learn how to embed images, edit them, and more in this video micro tutorial. Select "Insert" from the top menu in your Prezi editor: Select "Image": A toolbar will pop in from the right …

732 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