?
Solved

PHP-created button background graphic messed up

Posted on 2011-03-03
9
Medium Priority
?
489 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
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

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 1000 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

Featured Post

Are You Using the Best Web Development Editor?

The worlds of web hosting and web development are constantly evolving. Every year we see design trends change, coding standards adapt and new frameworks/CMS created. With such a quick pace of change it’s easy to get lost trying to keep up.

See if your editor made the list.

Question has a verified solution.

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

Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
3 proven steps to speed up Magento powered sites. The article focus is on optimizing time to first byte (TTFB), full page caching and configuring server for optimal performance.
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …
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 …
Suggested Courses

777 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