Jump to content

Font tester - I thought I had it.

ttmt

By ttmt
in PHP Coding Help

 Share

Recommended Posts

ttmt Member

ttmt

Posted
Posted

Font tester - I thought I had it.

 

Hi all

 

I'm trying to produce this font tester where you can set a font with inputted text at a selected size.

In my demo here http://www.ttmt.org.uk/test/ I can type in text and select the size. The image is set with

the correct text and size but everything else is removed from the page.

How can I do this so the image of the text appears below the form in the image tag.

 

<?php
  if(isset($_POST['submit'])){
    // Set the content-type
  	header('Content-Type: image/png');

  	// Create the image
  	$im = imagecreatetruecolor(400, 30);

  	// Create some colors
  	$white = imagecolorallocate($im, 255, 255, 255);
  	$black = imagecolorallocate($im, 0, 0, 0);
  	imagefilledrectangle($im, 0, 0, 399, 29, $white);

  	// The text to draw
  	$text = $_POST['text'];
  	$textSize = $_POST['size'];
  	$font = 'corbelb.ttf';

  	// Add the text
  	//imagettftext($im, 20, 0, 10, 20, $black, $font, $text);
  	imagettftext($im, $textSize, 0, 10, 20, $black, $font, $text);

  	// Using imagepng() results in clearer text compared with imagejpeg()
  	$img = imagepng($im);
  	imagedestroy($im);
  }

?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<title>untitled</title>
</head>

<body>
  <form action="index.php" method="post">
    <input type="text" name="text" />
    <select name="size">
      <option value="10">10</option>
      <option value="12">12</option>
      <option value="14">14</option>
      <option value="18">18</option>
      <option value="24">24</option>
      <option value="30">30</option>
      <option value="36">36</option>
    </select>  
    <input type="submit" name="submit" value="Set →" />
  </form>
  
<img src="<?php echo $img; ?>" />

</body>
</html>

 

Link to comment
https://forums.phpfreaks.com/topic/249402-font-tester-i-thought-i-had-it/
Share on other sites
premiso Regular Member

premiso

Posted
Posted

The problem is you are echoing out an actual image, so the page thinks you are just displaying an image. In order to do this, you should have a seperate script, image.php and pass variables via GET to it:

 

image.php:

<?php
if (!empty($_GET['text'])) {
    // Set the content-type
  	header('Content-Type: image/png');

  	// Create the image
  	$im = imagecreatetruecolor(400, 30);

  	// Create some colors
  	$white = imagecolorallocate($im, 255, 255, 255);
  	$black = imagecolorallocate($im, 0, 0, 0);
  	imagefilledrectangle($im, 0, 0, 399, 29, $white);

  	// The text to draw
  	$text = $_GET['text'];
  	$textSize = $_GET['size'];
  	$font = 'corbelb.ttf';

  	// Add the text
  	//imagettftext($im, 20, 0, 10, 20, $black, $font, $text);
  	imagettftext($im, $textSize, 0, 10, 20, $black, $font, $text);

  	// Using imagepng() results in clearer text compared with imagejpeg()
  	$img = imagepng($im);
  	imagedestroy($im);
}

 

index.php:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<title>untitled</title>
</head>

<body>
  <form action="index.php" method="post">
    <input type="text" name="text" />
    <select name="size">
      <option value="10">10</option>
      <option value="12">12</option>
      <option value="14">14</option>
      <option value="18">18</option>
      <option value="24">24</option>
      <option value="30">30</option>
      <option value="36">36</option>
    </select>  
    <input type="submit" name="submit" value="Set →" />
  </form>
  
<?php if (!empty($_POST['submit'])) {
        echo '<img src="image.php?text=' . $_POST['text'] . '&size='.$_POST['size'].'" />';
}
?>

</body>
</html>

 

And that should get you what you are looking for (pending any syntax errors on my end).

ttmt Member

ttmt

Posted
  • Author
Posted

Thanks premiso, thorpe for your help, thorpe I understand now I think

 

I've got this partly working now but I'm stuck again - http://www.ttmt.org.uk/test/index.php

 

It starts now with a predefined text area (red) and text. I can enter text and select a size that is show in the text area as an image.

 

My problem is I want to be able to change the font size without changing the text. If I try to change the text size with nothing in the text input area nothing is displayed because nothing is in the text box. I want to keep the last thing displayed the red area but just change the font size. I can see why this is happening but can't work out a solution.

 

Any help would be greatly appreciated.

 

index.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<title>untitled</title>
  <style type="text/css">
    *{margin:0;padding:0;}
    #wrap{margin:20px 0 0 20px;}
    img{margin:20px 0 0 0px;}
  </style>
</head>

<body>
  <div id="wrap">
    <form action="index.php" method="post">
      <input type="text" name="text" />
      <select name="size">
        <option value="10">10</option>
        <option value="12">12</option>
        <option value="14">14</option>
        <option value="18">18</option>
        <option value="24">24</option>
        <option value="30">30</option>
        <option value="36">36</option>
        <option value="50">50</option>
        <option value="100">100</option>
      </select>  
      <input type="submit" name="submit" value="Set →" />
    </form>
  
  	<?php 
  		  
  	if(!empty($_POST['submit'])){
  	  if($_POST['text'] != ""){
  	    $myText = $_POST['text'];
    	  $mySize = $_POST['size'];
    	  echo '<img src="image.php?text='.$myText.'&size='.$mySize.'">';
  	  }else{
  	    $mySize = $_POST['size'];
    	  echo '<img src="image.php?size='.$mySize.'">';
  	  }
  	}else{
  	  $myText = "Handgloves";
  	  $mySize = 50;
  	  echo '<img src="image.php?text='.$myText.'&size='.$mySize.'">';
  	}
  	  
  	?>
  </div>
</body>
</html>

 

 

image.php

<?php
        
header('Content-Type: image/png');

$im = imagecreatetruecolor(600, 160);

$red = imagecolorallocate($im, 255, 0, 0);
$black = imagecolorallocate($im, 0, 0, 0);
imagefilledrectangle($im, 0, 0, 600, 199, $red);
    
  if(($_GET['text'] != "")){
    $text = $_GET['text']; 
  }
  
$textSize = $_GET['size'];
$font = 'corbelb.ttf';

imagettftext($im, $textSize, 0, 10, 120, $black, $font, $text);

$img = imagepng($im);
imagedestroy($im);

?>

 

ttmt Member

ttmt

Posted
  • Author
Posted

Sorry to pester but can anyone help with this, it's driving me crazy now.

 

This is my latest attempt - I thought I could use an array to store the text then use that value in the array when the input text field was empty.

 

index.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<title>untitled</title>
  <style type="text/css">
    *{margin:0;padding:0;}
    #wrap{margin:20px 0 0 20px;}
    img{margin:20px 0 0 0px;}
  </style>
</head>

<body>
  <div id="wrap">
    <form action="index.php" method="post">
      <input type="text" name="text" />
      <select name="size">
        <option value="24">24</option>
        <option value="30">30</option>
        <option value="36">36</option>
        <option value="50">50</option>
        <option value="100">100</option>
      </select>  
      <input type="submit" name="submit" value="Set →" />
    </form>
  
  	<?php 
  	  
  	  $oldText = array();
  	  
    	if(!empty($_POST['submit'])){
    	  if($_POST['text'] != ""){
    	    $myText = $_POST['text'];
    	    array_unshift($oldText, $myText);
    	    print_r($oldText);
      	  $mySize = $_POST['size'];
      	  echo '<img src="image.php?text='.$myText.'&size='.$mySize.'">';
    	  }else{
    	    print_r($oldText);
    	    $mySize = $_POST['size'];
    	    $myText = $oldText[0];
      	  echo '<img src="image.php?text='.$myText.'&size='.$mySize.'">';
    	  }
    	}else{
    	  $myText = "Handgloves";
    	  array_unshift($oldText, $myText);
    	  print_r($oldText);
    	  $mySize = 50;
    	  echo '<img src="image.php?text='.$myText.'&size='.$mySize.'">';
    	}
  	?>
  </div>
</body>
</html>

 

image.php

<?php
        
header('Content-Type: image/png');

$im = imagecreatetruecolor(600, 160);

$red = imagecolorallocate($im, 255, 0, 0);
$black = imagecolorallocate($im, 0, 0, 0);
imagefilledrectangle($im, 0, 0, 600, 199, $red);
    
  $text = $_GET['text'];
$textSize = $_GET['size'];
$font = 'corbelb.ttf';

imagettftext($im, $textSize, 0, 10, 120, $black, $font, $text);

$img = imagepng($im);
imagedestroy($im);

?>

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.