Problems with gradient creation with text

PHP programming forum. Ask questions or help people concerning PHP code. Don't understand a function? Need help implementing a class? Don't understand a class? Here is where to ask. Remember to do your homework!

Moderator: General Moderators

Post Reply
KrisZiel
Forum Newbie
Posts: 1
Joined: Mon Aug 27, 2007 8:53 pm

Problems with gradient creation with text

Post by KrisZiel »

feyd | Please use

Code: Select all

,

Code: Select all

and [syntax="..."] tags where appropriate when posting code. Your post has been edited to reflect how we'd like it posted. Please read:  [url=http://forums.devnetwork.net/viewtopic.php?t=21171]Posting Code in the Forums[/url] to learn how to do it too.[/color]


Hello, I am new to PHP, but have gotten a few scripts working.  I got a few scripts working, I had one script that would create an image from a form input, with text, custom font, and a set jpg as the background.  This worked fine (using MAMP on my MacBook Pro, but only outputs "ÿØÿà").  Now I am trying to make it so that the user can select the starting color, ending color, direction, width, and height, that worked fine.  When I switched out the "imagefromjpeg" argument in the code with the code for the gradient, it only displays the gradient (Once again, only using MAMP on my MBP, when trying to use it on a PHP compatible all that was displayed was "‰PNG"). I am totally stumped, both in how to make the php work on my server, and how (if its even possible), to make a script that will genera a JPG or PNG from the gradient image with a text overlay. you can check out the following URLS, followed by the source of the page:
http://www.krisziel.com/styles/bb.php (this submits the colors, direction, etc. to bbimg.php)
"

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Blue Button</title>
</head>
<body>
<form name="form1" method="POST" action="bbimg.php">
<input type="text"  style="width: 150px; " name="text" value="Button Text"><br>
<select name="startingcolor" style="width: 155px;">
<option value="#ffffff">White</option>
<option value="#636363">Dark Gray</option>
<option value="#999999">Light Gray</option>
<option value="#ff0000">Red</option>
<option value="#00ff00">Green</option>
<option value="#0033ff">Blue</option>
<option value="#3300cc">Purple</option>
<option value="#ff00cc">Pink</option>
</select><br>
<select name="endingcolor" style="width: 155px;">
<option value="#ffffff">White</option>
<option value="#636363">Dark Gray</option>
<option value="#999999">Light Gray</option>
<option value="#ff0000">Red</option>
<option value="#00ff00">Green</option>
<option value="#0033ff">Blue</option>
<option value="#3300cc">Purple</option>
<option value="#ff00cc">Pink</option>
</select><br>
<select name="direction" style="width: 155px;">
<option value="vertical">Vertical</option>
<option value="circle1">Circle</option>
<option value="circle">Circle2</option>
</select><br>
<select name="height" style="width: 155px;">
<option value="30">30</option>
<option value="35">35</option>
<option value="40">40</option>
</select><br>
<select name="width" style="width: 155px;">
<option value="200">200</option>
<option value="230">230</option>
<option value="260">260</option>
</select><br>
<select name="myfont" style="width: 155px;">
<option value="fonts/Acidic.ttf">Acidic</option>
<option value="fonts/Futura Bold BT.ttf">Futura</option>
<option value="fonts/Texas LED.ttf">LED</option>
<option value="fonts/The End..ttf">The End</option>
<option value="fonts/K.P. Duty Textured JL.ttf">KP Duty Textured</option>
<option value="fonts/Karelia.ttf">Karelia</option>
</select>
<br>
<input type="submit"  style="width: 155px; " name="Submit" value="Get Image!">
</form>
<div style="color: #666666; font-size: 14px; font-family: Arial, Helvetica, sans-serif, futura; background: url(images/bluebutton.jpg); width: 217px; height: 25px; padding-top: 7px; padding-left: 5px;">Here is what the button looks like</div>
</body>
</html>"
http://www.krisziel.com/styles/bbimg.php
"<?php
$image = imagecreatefromjpeg('images/bluebutton.jpg'); // Get a background
$font = $_POST['myfont']; // Get a font
$a = explode(',', $_POST["mycolor"]);
$textcolor = imagecolorallocate($image,$a[0],$a[1],$a[2]); //$_GET['mycolor']); // Set text color
$text = $_POST['text']; // Here is our text
imagettftext($image, 16, 0, 20, 24, $textcolor, $font, $text); // Write the text with a font

header("Content-type: image/jpeg"); // Its a JPEG
imagejpeg($image,'',90); // Zap it to the browser
imagedestroy($image); // Memory Freeupage
?>"
http://www.krisziel.com/styles/gradient.php (this is what does the heavy lifting for gradientmaker.php)
"<?php
/*
Script Name: GD Gradient Fill
Script URI: http://planetozh.com/blog/my-projects/i ... ient-fill/
Description: Creates a gradient fill of any shape (rectangle, ellipse, vertical, horizontal, diamond)
Author: Ozh
Version: 1.1
Author URI: http://planetozh.com/
*/

/* Release history :
 * 1.1
 *		- changed : more nicely packaged as a class
 *		- fixed : not displaying proper gradient colors with image dimension greater than 255 (because of a limitation in imagecolorallocate)
 *		- added : optional parameter 'step', more options for 'direction'
 * 1.0
 *		- initial release
 */

/* Usage :
 *
 * require_once('gradient.php');
 * $image = new gd_gradient_fill($width,$height,$direction,$startcolor,$endcolor,$step);
 *
 * Parameters :
 *		- width and height : integers, dimesions of your image.
 *		- direction : string, shape of the gradient.
 *		  Can be : vertical, horizontal, rectangle (or square), ellipse, ellipse2, circle, circle2, diamond.
 *		- startcolor : string, start color in 3 or 6 digits hexadecimal.
 *		- endcolor : string, end color in 3 or 6 digits hexadecimal.
 *		- step : integer, optional, default to 0. Step that breaks the smooth blending effect.
 * Returns a resource identifier.
 *
 * Examples :
 *
 * 1.
 * require_once('/home/ozh/www/includes/gd-gradient-fill.php');
 * $image = new gd_gradient_fill(200,200,'horizontal','#fff','#f00');
 *
 * 2.
 * require_once('c:/iis/inet/include/gd-gradient-fill.php');
 * $myimg = new gd_gradient_fill(80,20,'diamond','#ff0010','#303060');
 *
 */


// Test it :
// $image = new gd_gradient_fill(400,200,'ellipse','#f00','#000',0);

class gd_gradient_fill {
	
	// Constructor. Creates, fills and returns an image
	function gd_gradient_fill($w,$h,$d,$s,$e,$step=0) {
		$this->width = $w;
		$this->height = $h;
		$this->direction = $d;
		$this->startcolor = $s;
		$this->endcolor = $e;
		$this->step = intval(abs($step));

		// Attempt to create a blank image in true colors, or a new palette based image if this fails
		if (function_exists('imagecreatetruecolor')) {
			$this->image = imagecreatetruecolor($this->width,$this->height);
		} elseif (function_exists('imagecreate')) {
			$this->image = imagecreate($this->width,$this->height);
		} else {
			die('Unable to create an image');
		}
		
		// Fill it
		$this->fill($this->image,$this->direction,$this->startcolor,$this->endcolor);
		
		// Show it		
		$this->display($this->image);
		
		// Return it
		return $this->image;
	}
	
	
	// Displays the image with a portable function that works with any file type
	// depending on your server software configuration
	function display ($im) {
		if (function_exists("imagepng")) {
			header("Content-type: image/png");
			imagepng($im);
		}
		elseif (function_exists("imagegif")) {
			header("Content-type: image/gif");
			imagegif($im);
		}
		elseif (function_exists("imagejpeg")) {
			header("Content-type: image/jpeg");
			imagejpeg($im, "", 0.5);
		}
		elseif (function_exists("imagewbmp")) {
			header("Content-type: image/vnd.wap.wbmp");
			imagewbmp($im);
		} else {
			die("Doh ! No graphical functions on this server ?");
		}
		return true;
	}
	
	
	// The main function that draws the gradient
	function fill($im,$direction,$start,$end) {
		
		switch($direction) {
			case 'horizontal':
				$line_numbers = imagesx($im);
				$line_width = imagesy($im);
				list($r1,$g1,$b1) = $this->hex2rgb($start);
				list($r2,$g2,$b2) = $this->hex2rgb($end);
				break;
			case 'vertical':
				$line_numbers = imagesy($im);
				$line_width = imagesx($im);
				list($r1,$g1,$b1) = $this->hex2rgb($start);
				list($r2,$g2,$b2) = $this->hex2rgb($end);
				break;
			case 'ellipse':
				$width = imagesx($im);
				$height = imagesy($im);
				$rh=$height>$width?1:$width/$height;
				$rw=$width>$height?1:$height/$width;
				$line_numbers = min($width,$height);
				$center_x = $width/2;
				$center_y = $height/2;
				list($r1,$g1,$b1) = $this->hex2rgb($end);
				list($r2,$g2,$b2) = $this->hex2rgb($start);
				imagefill($im, 0, 0, imagecolorallocate( $im, $r1, $g1, $b1 ));
				break;
			case 'ellipse2':
				$width = imagesx($im);
				$height = imagesy($im);
				$rh=$height>$width?1:$width/$height;
				$rw=$width>$height?1:$height/$width;
				$line_numbers = sqrt(pow($width,2)+pow($height,2));
				$center_x = $width/2;
				$center_y = $height/2;
				list($r1,$g1,$b1) = $this->hex2rgb($end);
				list($r2,$g2,$b2) = $this->hex2rgb($start);
				break;
			case 'circle':
				$width = imagesx($im);
				$height = imagesy($im);
				$line_numbers = sqrt(pow($width,2)+pow($height,2));
				$center_x = $width/2;
				$center_y = $height/2;
				$rh = $rw = 1;
				list($r1,$g1,$b1) = $this->hex2rgb($end);
				list($r2,$g2,$b2) = $this->hex2rgb($start);
				break;
			case 'circle2':
				$width = imagesx($im);
				$height = imagesy($im);
				$line_numbers = min($width,$height);
				$center_x = $width/2;
				$center_y = $height/2;
				$rh = $rw = 1;
				list($r1,$g1,$b1) = $this->hex2rgb($end);
				list($r2,$g2,$b2) = $this->hex2rgb($start);
				imagefill($im, 0, 0, imagecolorallocate( $im, $r1, $g1, $b1 ));
				break;
			case 'square':
			case 'rectangle':
				$width = imagesx($im);
				$height = imagesy($im);
				$line_numbers = max($width,$height)/2;
				list($r1,$g1,$b1) = $this->hex2rgb($end);
				list($r2,$g2,$b2) = $this->hex2rgb($start);
				break;
			case 'diamond':
				list($r1,$g1,$b1) = $this->hex2rgb($end);
				list($r2,$g2,$b2) = $this->hex2rgb($start);
				$width = imagesx($im);
				$height = imagesy($im);
				$rh=$height>$width?1:$width/$height;
				$rw=$width>$height?1:$height/$width;
				$line_numbers = min($width,$height);
				break;
			default:
		}
		
		for ( $i = 0; $i < $line_numbers; $i=$i+1+$this->step ) {
			// old values :
			$old_r=$r;
			$old_g=$g;
			$old_b=$b;
			// new values :
			$r = ( $r2 - $r1 != 0 ) ? intval( $r1 + ( $r2 - $r1 ) * ( $i / $line_numbers ) ): $r1;
			$g = ( $g2 - $g1 != 0 ) ? intval( $g1 + ( $g2 - $g1 ) * ( $i / $line_numbers ) ): $g1;
			$b = ( $b2 - $b1 != 0 ) ? intval( $b1 + ( $b2 - $b1 ) * ( $i / $line_numbers ) ): $b1;
			// if new values are really new ones, allocate a new color, otherwise reuse previous color.
			// There's a "feature" in imagecolorallocate that makes this function
			// always returns '-1' after 255 colors have been allocated in an image that was created with
			// imagecreate (everything works fine with imagecreatetruecolor)
			if ( "$old_r,$old_g,$old_b" != "$r,$g,$b") 
				$fill = imagecolorallocate( $im, $r, $g, $b );
			switch($direction) {
				case 'vertical':
					imagefilledrectangle($im, 0, $i, $line_width, $i+$this->step, $fill);
					break;
				case 'horizontal':
					imagefilledrectangle( $im, $i, 0, $i+$this->step, $line_width, $fill );
					break;
				case 'ellipse':
				case 'ellipse2':
				case 'circle':
				case 'circle2':
					imagefilledellipse ($im,$center_x, $center_y, ($line_numbers-$i)*$rh, ($line_numbers-$i)*$rw,$fill);
					break;
				case 'square':
				case 'rectangle':
					imagefilledrectangle ($im,$i*$width/$height,$i*$height/$width,$width-($i*$width/$height), $height-($i*$height/$width),$fill);
					break;
				case 'diamond':
					imagefilledpolygon($im, array (
						$width/2, $i*$rw-0.5*$height,
						$i*$rh-0.5*$width, $height/2,
						$width/2,1.5*$height-$i*$rw,
						1.5*$width-$i*$rh, $height/2 ), 4, $fill);
					break;
				default:	
			}		
		}
	}
	
	// #ff00ff -> array(255,0,255) or #f0f -> array(255,0,255)
	function hex2rgb($color) {
		$color = str_replace('#','',$color);
		$s = strlen($color) / 3;
		$rgb[]=hexdec(str_repeat(substr($color,0,$s),2/$s));
		$rgb[]=hexdec(str_repeat(substr($color,$s,$s),2/$s));
		$rgb[]=hexdec(str_repeat(substr($color,2*$s,$s),2/$s));
		return $rgb;
	}
}
?>"
http://www.krisziel.com/styles/test.php (This is where the user inputs text to gradientmaker.php)
"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Blue Button</title>
</head>
<body>
<form name="form1" method="POST" action="gradientmaker.php">
<input type="text"  style="width: 150px; " name="text" value="Button Text"><br>
<select name="startingcolor" style="width: 155px;">
<option value="#ffffff">White</option>
<option value="#636363">Dark Gray</option>
<option value="#999999">Light Gray</option>
<option value="#ff0000">Red</option>
<option value="#00ff00">Green</option>
<option value="#0033ff">Blue</option>
<option value="#3300cc">Purple</option>
<option value="#ff00cc">Pink</option>
</select><br>
<select name="endingcolor" style="width: 155px;">
<option value="#ffffff">White</option>
<option value="#636363">Dark Gray</option>
<option value="#999999">Light Gray</option>
<option value="#ff0000">Red</option>
<option value="#00ff00">Green</option>
<option value="#0033ff">Blue</option>
<option value="#3300cc">Purple</option>
<option value="#ff00cc">Pink</option>
</select><br>
<select name="direction" style="width: 155px;">
<option value="vertical">Vertical</option>
<option value="circle1">Circle</option>
<option value="circle">Circle2</option>
</select><br>
<select name="height" style="width: 155px;">
<option value="30">30</option>
<option value="35">35</option>
<option value="40">40</option>
</select><br>
<select name="width" style="width: 155px;">
<option value="200">200</option>
<option value="230">230</option>
<option value="260">260</option>
</select><br>
<select name="myfont" style="width: 155px;">
<option value="fonts/Acidic.ttf">Acidic</option>
<option value="fonts/Futura Bold BT.ttf">Futura</option>
<option value="fonts/Texas LED.ttf">LED</option>
<option value="fonts/The End..ttf">The End</option>
<option value="fonts/K.P. Duty Textured JL.ttf">KP Duty Textured</option>
<option value="fonts/Karelia.ttf">Karelia</option>
</select>
<br>
<input type="submit"  style="width: 155px; " name="Submit" value="Get Image!">
</form>
<div style="color: #666666; font-size: 14px; font-family: Arial, Helvetica, sans-serif, futura; background: url(images/bluebutton.jpg); width: 217px; height: 25px; padding-top: 7px; padding-left: 5px;">Here is what the button looks like</div>
</body>
</html>"
http://www.krisziel.com/styles/gradientmaker.php (does the light lifting, should display an image with text overlay, but doesn't)
"<?php
require_once('gradient.php');
$image = new gd_gradient_fill($_POST['width'],$_POST['height'],$_POST['direction'],$_POST['startingcolor'],$_POST['endingcolor']);
$font = $_POST['myfont']; // Get a font
$a = explode(',', $_POST["mycolor"]);
$textcolor = imagecolorallocate($image,$a[0],$a[1],$a[2]); //$_GET['mycolor']); // Set text color
$text = $_POST['text']; // Here is our text
imagettftext($image, 16, 0, 20, 24, $textcolor, $font, $text); // Write the text with a font

header("Content-type: image/jpeg"); // Its a JPEG
imagejpeg($image,'',90); // Zap it to the browser
imagedestroy($image); // Memory Freeupage
?>
"
Any help would be greatly appreciated.


feyd | Please use

Code: Select all

,

Code: Select all

and [syntax="..."] tags where appropriate when posting code. Your post has been edited to reflect how we'd like it posted. Please read:  [url=http://forums.devnetwork.net/viewtopic.php?t=21171]Posting Code in the Forums[/url] to learn how to do it too.[/color]
Post Reply