Page 1 of 1

wrap a string on an image

Posted: Fri Apr 07, 2006 11:00 am
by ed209
I would like to be able to wrap lines of text on an image, then draw a rectangle behind them.

e.g. if someone submits this string:

this is a long string that is wider than my image will allow. It will overlap the edges.

but the image I am applying it to is only wide enough for 1/3 of it then I want to wrap the string like so:

this is a long string that is
wider than my image will
allow. It will overlap the
edges.


I also want to draw a rectangle behind it, but over the top of the image. So far I can add the rectangle and text, but not wrap the text OR get the size (in pixels) of the text to draw an appropriate background. Is this possible?

Posted: Fri Apr 07, 2006 11:08 am
by feyd

Posted: Fri Apr 07, 2006 11:55 am
by ed209
Thanks feyd. That would have saved me some time!

Incase anyone has a similar problem but they're not using a ttf then there doesn't appear to be a way of measuring the actual pixel size of the font. I cheated and measured a screen grab in photoshop then made this. I haven't tested it much but it appears to wrap the text in an image. If you make any improvements, post your code back here.


edited

Code: Select all

<?php
header("Content-type: image/jpeg");

############################################################################################
#                                            GENERAL SETUP                                  
############################################################################################
$padding = 10; 				// padding for the text within the background rectangle
$line_height = 18; 			// line height for the text
$blank_image_width = 250;	// width of the blank image
$blank_image_height = 350;	// height of the blank image
$font_size = 3;				// font size range 1 - 5

function _wrap_lines($str, $chr_size, $frame_width, $frame_size, $padding){
	
	// get the number of characters in a string
	$num_of_chrs = strlen($str);
	// get the width in pixels of that string
	$string_width = $chr_size * $num_of_chrs;
	
	// if the string won't fit on the image we need to wrap the text
	if($string_width > $frame_width){
		$words = explode(" ", $str);

		// keep track of the total width of our line
		$cumulative_line_width = 0;
		
		// current working line
		$this_line = "";
		
		// we will store our lines in an array
		$lines = array();
		
		for($i=0; $i<count($words); $i++){
			
			$word_length = strlen($words[$i]) * $chr_size;
			
			if(($word_length + $cumulative_line_width + ($padding)) > $frame_width){
			
				// store our current line
				$lines[] = $this_line." ";
				
				// start a new line 
				$this_line = $words[$i]." ";
				$cumulative_line_width = 0;
				
			}else{
				$this_line .= $words[$i]." ";
				$cumulative_line_width = $cumulative_line_width + $word_length;
			}
		}
		
		//catch the last line
		$lines[] = $this_line;
		
		return $lines;
	
	}else{
	
		return array($str);
		
	}

}




##############################################
#GET THE STRING
##############################################
$string = "The points are relative to the text regardless of the angle, so upper left means in the top left-hand corner seeing the text horizontally.This function requires both the GD library and the FreeType library.";

##############################################
#SELECT THE IMAGE WE ARE GOING TO WRITE ON
##############################################
//use an existing image
//$im = imagecreatefromjpeg("Clarke.jpg");

// create a new image
$im = imagecreate($blank_image_width, $blank_image_height);



############################################################################################
#                                             FONT STUFF                                    
############################################################################################
##############################################
# GET OUR LINES OF TEXT WRAPPED AND READY     
##############################################
$lines = _wrap_lines($string, imagefontheight($font_size), imagesx($im), imagesy($im), $padding);
##############################################
# ALLOCATE A COLOUR TO THE FONT               
##############################################
$font_colour = imagecolorallocate($im, 255, 243, 249);
##############################################
# X TEXT POSITION                             
##############################################
$text_x_pos = imagesx($im) - imagesx($im) + $padding;
##############################################
# Y TEXT POSITION                             
##############################################
$text_y_pos = (imagesy($im) - (count($lines)*$line_height + $padding));




############################################################################################
#                                             FONT COLOUR BG                                
############################################################################################
##############################################
# RECTANGLE POSITION                          
##############################################
$rect_pos = array();
$rect_pos["x"] = 0;
$rect_pos["y"] = imagesy($im) - (count($lines)*$line_height + ($padding*2));
$rect_pos["width"] = imagesx($im);
$rect_pos["height"] = $rect_pos["y"] + (count($lines)*$line_height + ($padding*2));
##############################################
# RECTANGLE COLOR                             
##############################################
$rec_colour_settings = array();
$rec_colour_settings["R"] = 255;
$rec_colour_settings["G"] = 120;
$rec_colour_settings["B"] = 139;
$rec_colour_settings["A"] = 60;
$rect_colour = imagecolorallocatealpha($im, $rec_colour_settings["R"], $rec_colour_settings["G"], $rec_colour_settings["B"], $rec_colour_settings["A"]);

##############################################
# DRAW RECTANGLE                              
##############################################
imagefilledrectangle($im, $rect_pos['x'], $rect_pos['y'], $rect_pos['width'], $rect_pos['height'], $rect_colour);



// write our lines to the image
for($i=0; $i<count($lines); $i++){
	imagestring($im, $font_size, $text_x_pos, ($text_y_pos + ($i*$line_height)), $lines[$i], $font_colour);
}

// create the image
imagejpeg($im, "", 100);


imagedestroy($im);

?>

Posted: Fri Apr 07, 2006 11:58 am
by feyd
there are other font types supported by different bounding box functions.. imageftbbox() and imagepsbbox()

Posted: Fri Apr 07, 2006 1:38 pm
by onion2k
feyd wrote:there are other font types supported by different bounding box functions.. imageftbbox() and imagepsbbox()
And imagefontwidth() for the built in fonts.

Posted: Fri Apr 07, 2006 2:14 pm
by ed209
excellent, thanks for the pointers. The script is working quite well now.