Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

PHP-created button background graphic messed up

Posted on 2011-03-03
9
Medium Priority
?
490 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
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 

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

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

Question has a verified solution.

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

Introduction This article is intended for those who are new to PHP error handling (https://www.experts-exchange.com/articles/11769/And-by-the-way-I-am-New-to-PHP.html).  It addresses one of the most common problems that plague beginning PHP develop…
There are times when I have encountered the need to decompress a response from a PHP request. This is how it's done, but you must have control of the request and you can set the Accept-Encoding header.
The viewer will learn how to count occurrences of each item in an array.
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
Suggested Courses

610 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