Solved

PHP-created button background graphic messed up

Posted on 2011-03-03
9
488 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
Why Off-Site Backups Are The Only Way To Go

You are probably backing up your data—but how and where? Ransomware is on the rise and there are variants that specifically target backups. Read on to discover why off-site is the way to go.

 

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

Featured Post

Salesforce Made Easy to Use

On-screen guidance at the moment of need enables you & your employees to focus on the core, you can now boost your adoption rates swiftly and simply with one easy tool.

Question has a verified solution.

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

Password hashing is better than message digests or encryption, and you should be using it instead of message digests or encryption.  Find out why and how in this article, which supplements the original article on PHP Client Registration, Login, Logo…
This article discusses how to create an extensible mechanism for linked drop downs.
It is a freely distributed piece of software for such tasks as photo retouching, image composition and image authoring. It works on many operating systems, in many languages.
In addition to being a great web-based presentation tool, Prezi also makes it easy to save your presentation as a PDF to share with others as well. Learn how in this tutorial. Select the share icon from the top menu in your Prezi editor: Select "D…

707 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