[SOLVED] Resizing the text with imagestring?

[cooldude832]

I want to resize some text generated with imagestring() and I'm not sure how to do this?

Or is there a better function to use?

[GingerRobot]

Thats quite vague. However, i guess what you're trying to achieve is something which will fit text to a certain area in your images.

 

If so, try using the imagettfbbox which will return an array of points corresponding to the size of a text string given it's font, size and angle.

 

I use this to reduce the length of text applied to artist and song names used in my signiture, until it fits in the space available.

[cooldude832]

well I gues my question is answered. I am making a custom signature app and I wanted to offer  small medium large font size, but I think I will just need to compile 3 different font librarys for each face being the small medium large type right?

[Barand]

Use truetype fonts with imagettftext(). These scale to any font size you need.

[cooldude832]

don't know if I can cause its coming off a monogramming computer.

[cooldude832]

my image is showing up blank any ideas???

<?php

header("Content-Type: image/jpeg");

function LoadJpeg($string,$font,$color,$size){
    $im = @imagecreatefromjpeg($imgname); /* Attempt to open */
    if (!$im) { /* See if it failed */
        $im  = imagecreatetruecolor(150, 30); /* Create a black image */
	$fonts = array("arial.ttf");
        $colors = array();
	$colors[0] = imagecolorallocate($im, 0, 0, 0);
	$colors[1] = imagecolorallocate($im, 70,130,180);
	$colors[2] = imagecolorallocate($im, 48, 128, 20);
	$colors[3] = imagecolorallocate($im, 205, 0, 0);
	$colors[4] = imagecolorallocate($im, 255, 230, 0);
	$colors[5] = imagecolorallocate($im, 255, 255, 255);
	$fonts=  array();
	imagefilledrectangle($im, 0, 0, 150, 30, $colors[5]);
	$textcolor = imagecolorallocate($im, 0, 0, 255);
	// write the string at the top left
	imagettftext($im, 20, 0, 0, 0, $colors[$color], "arial.ttf", $text);
    }
    return $im;
}
$string = strip_tags(trim($_GET['string']));
if(empty($string)){
	$string = "Your Name Here";
}
if(!empty($_GET['color']) && is_numeric($_GET['color']) && $_GET['color'] >= 0 && $_GET['color'] <= 5){
	$color = $_GET['color'];
}
else{
	$color = 0;
}
if(!empty($_GET['size']) && is_numeric($_GET['size']) && $_GET['size'] >= 0 && $_GET['size'] <= 5){
	$size = $_GET['size'];
}
else{
	$size= $_GET['size'];
}
if(!empty($_GET['font']) && is_numeric($_GET['font']) && $_GET['font'] >= 0 && $_GET['font'] <= count($fonts)-1){
	$font = $_GET['font'];
}
else{
	$font = 0;
}
$img = LoadJpeg($string,$font,$color,$size);
imagejpeg($img);

?>

It isn't saying in the source code the ttf can't be found

[Barand]

$imgname is undefined in the function.

 

$fonts is never referenced.

 

arial.ttf would need to be in the script folder.

 

 

[cooldude832]

I am still having issues any ideas?

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

function LoadJpeg($string,$font,$color,$size){
$im  = imagecreatetruecolor(150, 30); /* Create a black image */
$colors = array();
$colors[0] = imagecolorallocate($im, 0, 0, 0);
$colors[1] = imagecolorallocate($im, 70,130,180);
$colors[2] = imagecolorallocate($im, 48, 128, 20);
$colors[3] = imagecolorallocate($im, 205, 0, 0);
$colors[4] = imagecolorallocate($im, 255, 230, 0);
$colors[5] = imagecolorallocate($im, 255, 255, 255);
imagettftext($im, $size, 0, 0, 0, $colors[$color], $font, $string);
return $im;
}
$fonts = array();
$fonts["Arial"] = "arial.ttf";
$string = strip_tags(trim($_GET['string']));
if(strlen($string)<1){
	$string = "Your Name Here.";
}
if(!empty($_GET['color']) && is_numeric($_GET['color']) && $_GET['color'] >= 0 && $_GET['color'] <= 5){
	$color = $_GET['color'];
}
else{
	$color = 0;
}
if(!empty($_GET['size']) && is_numeric($_GET['size']) && $_GET['size'] >= 0 && $_GET['size'] <= 5){
	$size = $_GET['size'];
}
else{
	$size= $_GET['size'];
}
if(array_key_exists($_GET['font'],$fonts)){
	$font = $fonts[$_GET['font']];
}
else{
	$font = $fonts["Arial"];
}
$img = LoadJpeg($string,$font,$color,$size);
imagejpeg($img);

?>

 

Returns a black box

[Barand]

One thing to watch with ttf fonts is that the x,y position is the basline of the text (unlike imagestring where x,y is the top of the font)

 

With a baseline at y=0, text is outside the image.

 

Also, with a truecolor image you have to do an explicit imagefill() with background color. Palletted images default to the first defined color as the background.

[cooldude832]

yeah the height was the issue, now i'm trying to use the get the box function to get a height, but it just don't want to line up

<?php
header("Content-type: image/png");
function LoadJpeg($string,$font,$color,$size){
//The box it will need to make that string
$box = imagettfbbox($size, 0, $font, $string);
//$box[3] is the top right X $box[0] is bottom left
$width = abs($box[3]-$box[0])+10;
//$box[1] is bottom left y $box[6] is top right y
$height = abs($box[1]-$box[6])+10;
$im = imagecreatetruecolor($width, $height);
$colors = array();
$colors[0] = imagecolorallocate($im, 0, 0, 0);
$colors[1] = imagecolorallocate($im, 70,130,180);
$colors[2] = imagecolorallocate($im, 48, 128, 20);
$colors[3] = imagecolorallocate($im, 205, 0, 0);
$colors[4] = imagecolorallocate($im, 255, 230, 0);
$colors[5] = imagecolorallocate($im, 255, 255, 255);
//echo "Size: ".$size."<br />Color: ".$colors[$color]."<br /> Font: ".$font."<br />String: ".$string;
imagefill($im, 0, 0, $colors[5]);
imagettftext($im, $size, 0, 0, 0, $colors[0], $font, $string);
imagepng($im);
imagedestroy($im);
}
$fonts = array();
$fonts["Arial"] = "arial.ttf";
$string = strip_tags(trim($_GET['string']));
if(strlen($string)<1){
	$string = "Your Name Here.";
}
if(!empty($_GET['color']) && is_numeric($_GET['color']) && $_GET['color'] >= 0 && $_GET['color'] <= 5){
	$color = $_GET['color'];
}
else{
	$color = 0;
}
if(!empty($_GET['size']) && is_numeric($_GET['size']) && $_GET['size'] >= 0 && $_GET['size'] <= 5){
	$size = $_GET['size'];
}
else{
	$size= $_GET['size'];
}
if(array_key_exists($_GET['font'],$fonts)){
	$font = $fonts[$_GET['font']];
}
else{
	$font = $fonts["Arial"];
}
$img = LoadJpeg($string,$font,$color,$size);


?>

 

Any ideas its giving me heights of 12 which seem too small for the font size I said

 

Edit:

I changed the points to pull and I am getting reasonable values but no text is showing?

[cooldude832]

solved it the 0,0 issue on the location was it

<?php
header("Content-type: image/png");
function LoadJpeg($string,$font,$color,$size){
//The box it will need to make that string
$box = imagettfbbox($size, 0, $font, $string);
//$box[3] is the top right X $box[0] is bottom left
$width = abs($box[0]-$box[2])+10;
//$box[1] is bottom left y $box[6] is top right y
$height = abs($box[1]-$box[7])+10;
//	echo "Width: ".$width."\n Height: ".$height;
$im = imagecreatetruecolor($width, $height);
$colors = array();
$colors[0] = imagecolorallocate($im, 0, 0, 0);
$colors[1] = imagecolorallocate($im, 70,130,180);
$colors[2] = imagecolorallocate($im, 48, 128, 20);
$colors[3] = imagecolorallocate($im, 205, 0, 0);
$colors[4] = imagecolorallocate($im, 255, 230, 0);
$colors[5] = imagecolorallocate($im, 255, 255, 255);
//echo "Size: ".$size."<br />Color: ".$colors[$color]."<br /> Font: ".$font."<br />String: ".$string;
imagefill($im, 0, 0, $colors[5]);
imagettftext($im, $size, 0, 1, $height-2, $colors[$color], $font, $string);
imagejpeg($im);
imagedestroy($im);
}
$fonts = array();
$fonts["Arial"] = "arial.ttf";
$string = strip_tags(trim($_GET['string']));
if(strlen($string)<1){
	$string = "Your Name Here.";
}
if(!empty($_GET['color']) && is_numeric($_GET['color']) && $_GET['color'] >= 0 && $_GET['color'] <= 5){
	$color = $_GET['color'];
}
else{
	$color = 0;
}
if(!empty($_GET['size']) && is_numeric($_GET['size']) && $_GET['size'] >= 0 && $_GET['size'] <= 5){
	$size = $_GET['size'];
}
else{
	$size= $_GET['size'];
}
if(array_key_exists($_GET['font'],$fonts)){
	$font = $fonts[$_GET['font']];
}
else{
	$font = $fonts["Arial"];
}
$img = LoadJpeg($string,$font,$color,$size);


?>

 

[cooldude832]

For those of you who want the final solution its a 2 part thing that updates an image as you type with javascript

Page one (Input a string)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<?php
$fonts = array();
$fonts["Arial"] = "arial.ttf";
?>
<html xmlns="http://www.w3.org/1999/xhtml" >

<head>

<title>String to Image</title>

<script language="javascript"  type="text/javascript">
function updateImage() {
var textval = "monogram.php?string=";
var textval2 = "&color=";
var textval3 = "&size=";
var textval4 = "&font=";
var srcval = textval+document.getElementById('text').value+textval2+document.getElementById('color').value+textval3+document.getElementById('size').value+textval4+document.getElementById('font').value;
document.images['monogram'].src = srcval;
}
</script> 	

</head>

<body>

<form>

  <p>

Your Name:<input type="text" size="20" name="text" id="text" onkeyup="updateImage();" /><br />
Size: <select name="size" id="size" onchange="updateImage();">
	<option value="15">Very Small</option>
	<option value="25">Small</option>
	<option value="35" selected="selected">Medium</option>
	<option value="50">Large</option>
	<option value="65">Extra Large</option>
	</select><br />
Color: <select name="color" id="color" onchange="updateImage();">
	<option value="0">Black</option>
	<option value="1">Blue</option>
	<option value="2">Green</option>
	<option value="3">Red</option>
	<option value="4">Yellow</option>
	</select><br />
Font: <select name="font" id="font" onchange="updateImage();">
	<?php
		foreach($fonts as $key => $value){
			echo "<option value=\"".$key."\">".$key."</option>";
		}
	?>
	</select>
  </p>
</form>
<img src="monogram.php?string=Your Name Here&color=0&size=50&font=Arial" id="monogram" border="0"/>

</body>

</html>

and the monogram.php file (Note the height variation on the string placement this was done for allowing characters below the "lineset" like y,q,p

<?php
header("Content-type: image/png");
function LoadJpeg($string,$font,$color,$size){
//The box it will need to make that string
$box = imagettfbbox($size, 0, $font, $string);
//$box[3] is the top right X $box[0] is bottom left
$width = abs($box[0]-$box[2])+10;
//$box[1] is bottom left y $box[6] is top right y
$height = abs($box[1]-$box[7])+20;
//	echo "Width: ".$width."\n Height: ".$height;
$im = imagecreatetruecolor($width, $height);
$colors = array();
$colors[0] = imagecolorallocate($im, 0, 0, 0);
$colors[1] = imagecolorallocate($im, 70,130,180);
$colors[2] = imagecolorallocate($im, 48, 128, 20);
$colors[3] = imagecolorallocate($im, 205, 0, 0);
$colors[4] = imagecolorallocate($im, 255, 230, 0);
$colors[5] = imagecolorallocate($im, 255, 255, 255);
//echo "Size: ".$size."<br />Color: ".$colors[$color]."<br /> Font: ".$font."<br />String: ".$string;
imagefill($im, 0, 0, $colors[5]);
imagettftext($im, $size, 0, 1, $height-$height*.25, $colors[$color], $font, $string);
return $im;

}
$fonts = array();
$fonts["Arial"] = "arial.ttf";
$string = strip_tags(trim($_GET['string']));
if(strlen($string)<1){
	$string = "Your Name Here.";
}
if(!empty($_GET['color']) && is_numeric($_GET['color']) && $_GET['color'] >= 0 && $_GET['color'] <= 5){
	$color = $_GET['color'];
}
else{
	$color = 0;
}
if(!empty($_GET['size']) && is_numeric($_GET['size'])){
	$size = $_GET['size'];
}
else{
	$size= 35;
}
if(array_key_exists($_GET['font'],$fonts)){
	$font = $fonts[$_GET['font']];
}
else{
	$font = $fonts["Arial"];
}
$img = LoadJpeg($string,$font,$color,$size);
imagepng($img);
?>

 

I know its called loadJPG as a function, but I found out a png is nicer