PHP - Problems creating an image containg text
<p>I'm trying to create an image containing text.</p>

<p>I've tried several examples I've found on the web, among them are:</p>

<p><a href="http://php.net/manual/en/function.imagettftext.php" rel="nofollow">http://php.net/manual/en/function.imagettftext.php</a></p>

<p><a href="http://www.daftlogic.com/projects-text-to-image.htm" rel="nofollow">http://www.daftlogic.com/projects-text-to-image.htm</a></p>

<p><a href="http://www.phpro.org/examples/Text-to-Image-with-GD.html" rel="nofollow">http://www.phpro.org/examples/Text-to-Image-with-GD.html</a></p>

<p>but I've tried others.</p>

<p>Let's take the one from daftlogic.com - <a href="http://www.daftlogic.com/projects-text-to-image.htm" rel="nofollow">http://www.daftlogic.com/projects-text-to-image.htm</a></p>

<p>I'm not using the large, main example on that page, but rather the short test shown, about 1/3 of the way down the page, after the line of text that reads:</p>

<p>"(1) Please test this example to ensure imagecreate works on your server..."</p>

<p>Search for that text and you'll find the code I'm testing.</p>

<p>I have tried the main example and it has failed with almost the same results.</p>

<p>I added the GD support test, just to see if it was really there. The error is not triggered - and phpinfo() run on the server shows GD support.</p>

<p>The PHP code: is</p>

<pre><code>&lt;?php
error_reporting(E_ALL);
// check for GD support if(!function_exists('ImageCreate')) {
fatal_error('Error: Server does not support PHP image generation') ; 
}
header("Content-type: image/png");
$im = @imagecreate(110, 20)
   or die("Cannot Initialize new GD image stream");
$background_color = imagecolorallocate($im, 0, 0, 0);
$text_color = imagecolorallocate($im, 233, 14, 91);
imagestring($im, 1, 5, 5,  "A Simple Text String", $text_color);
imagepng($im);
imagedestroy($im);
?&gt;
</code></pre>

<p>I have that code in a file named daftlogic.php in a directory named PHP which is right off my testing root on my server. I tried this on the copy of Abyss server I have installed on my system for PHP and other testing but the GD library is not included in the PHP installed for Abyss and if I ever get this working on the server (which does have GD) I'll go figure out how to include GD support on my system.</p>

<p>Okay -</p>

<p>Here's the directory structure:</p>

<pre><code>\testing -
      \phpmodules 
      \rootfolder
</code></pre>

<p>"testing" is a directory below the root directory for my real world site on this sever. </p>

<p>Basically I've emulating the structure of the actual web site directories and "testing" takes the place of the "httpdoc" directory which is not real world accessible.</p>

<p>"phpmodules" contains the files containing PHP code, no HTML, just PHP.</p>

<p>"rootfolder" is where the "pages" are, the HTML pages with extensions like HTML, SHTML, and PHP.</p>

<p>In my actual web site, there is a comparable directory which is the "root" directory and nothing above that, such as the directory in which I put the PHP code, is visible to the world.</p>

<p>daftlogic.php is in \testing\PHP</p>

<p>A file named "testinanotherone.php" is in \testing\rootfolder</p>

<p>The contents of that file are:</p>

<pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt;
&lt;html lang="en"&gt;&lt;head&gt;
&lt;meta content="text/html; charset=ISO-8859-1" http-equiv="content-type"&gt;
&lt;title&gt;Try yet another sample&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;?php include("../phpmodules/daftlogic.php"); php?&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>BY THE WAY - the directory <strong><em>structure</em></strong> is as I have shown you but the directory names have been changed to protect the .. well, I don't want any links to my actual test directories escaping the lab - that is, I don't want there to be links to my test directories.</p>

<p>If I use Firefox (3.6.24) to view the file testinanotherone.php, all that is displayed is an error message from Firefox which reads:</p>

<blockquote>
  <p>The image "http://bobnovell.com/testing/rootfolder/testanotherone.php'
  can't be displayed because it contains errors.</p>
</blockquote>

<p>Now, the interesting thing is that there is no page source - if I right click on the page, and the "View Page Source" menu item grayed out.</p>

<p>If I right click on the message, the contextual menu I get is that for an image file. If I then select "View Image Info" I get:</p>

<p>Under "General"
testanotherone.php (PNG Image):
Address:   <a href="http://www.bobnovell.com/testing/rootfolder/testanotherone.php" rel="nofollow">http://www.bobnovell.com/testing/rootfolder/testanotherone.php</a> (again, I've modified that to conceal the real directory names)
Type:  image/png
Render Mode: Quirks mode
Encoding: ISO-8859-1
Size: 0.42 KB (433 bytes)
Modified: Monday, April 02, 2012 10:35:17 PM</p>

<p>Under "Media"
Location: <a href="http://www.bobnovell.com/testing/rootfolder/testanotherone.php" rel="nofollow">http://www.bobnovell.com/testing/rootfolder/testanotherone.php</a> (again, I've modified that to conceal the real directory names)
Type: Image
Size: 0.42 KB (433 bytes
Dimensions: 0px × 0px (scaled to 740px × 19px)</p>

<p>I'll skip "Permissions" and "Security"</p>

<hr>

<p>This what I.E. shows when I view the page:</p>

<pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt;
&lt;html lang="en"&gt;&lt;head&gt;
&lt;meta content="text/html; charset=ISO-8859-1" http-equiv="content-type"&gt;
&lt;title&gt;create image&lt;/title&gt;
&lt;/head&gt;&lt;body&gt;
‰PNG


IHDRnV,šPLTEé[an÷fIDAT•c` `fxÄÀÃ`Ç ÀçÀä²41ƒ‚€˜Ë–Ý’Àq²@à©¤;{Ã¡0—
œi
&lt;n+²
Já-8Û4˜B8ÕAŠ»ñp¼Q‘UÎ³…v@¯×Ò¥kAIEND®B`‚&lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>The "View Source" menu item IS available and the source is:</p>

<pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt;
&lt;html lang="en"&gt;&lt;head&gt;
&lt;meta content="text/html; charset=ISO-8859-1" http-equiv="content-type"&gt;
&lt;title&gt;create image&lt;/title&gt;
&lt;/head&gt;&lt;body&gt;
PNG
</code></pre>

<p>Now - since Firefox was reporting errors in the image, I decided to comment out the header statement in daftlogic.php and see what I could see.</p>

<p>In Firefox I get:</p>

<pre><code>‰PNG  ��� IHDR���n������V,š���PLTE���é[an÷���fIDAT•c` `fxÄÀÃ`Ç ÀçÀä²41ƒ‚€˜Ë–Ý’Àq²@à©¤;{Ã¡0— œi 
</code></pre>

<p>In I.E. I get:</p>

<pre><code>‰PNG  IHDRnV,šPLTEé[an÷fIDAT•c` `fxÄÀÃ`Ç ÀçÀä²41ƒ‚€˜Ë–Ý’Àq²@à©¤;{Ã¡0— œi 
</code></pre>

<p>The source in Firefox (with the header statement commented out in the code) is:</p>

<pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt;
&lt;html lang="en"&gt;&lt;head&gt;
&lt;meta content="text/html; charset=ISO-8859-1" http-equiv="content-type"&gt;
&lt;title&gt;create image&lt;/title&gt;
&lt;/head&gt;&lt;body&gt;
‰PNG

���
IHDR���n������V,š���PLTE���é[an÷���fIDAT•c` `fxÄÀÃ`Ç ÀçÀä²41ƒ‚€˜Ë–Ý’Àq²@à©¤;{Ã¡0—
œi
</code></pre>

<p>
</p>

<p>The source in I.E. (without the header statement) is:</p>

<pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt;
&lt;html lang="en"&gt;&lt;head&gt;
&lt;meta content="text/html; charset=ISO-8859-1" http-equiv="content-type"&gt;
&lt;title&gt;create image&lt;/title&gt;
&lt;/head&gt;&lt;body&gt;
PNG
</code></pre>

<p>Which is, as far as I can tell, the same source shown when the header statemnt is in the code.</p>

<p>Does anyone have any idea how to make this work?</p>

<p>The only thing I'm wondering about is that I've see references to a package name FreeImage that is used in some of the samples I've found.</p>

<p>I don't think it comes into play with the code I'm trying but hey, you never know.</p>

<p>I began this trip through Wonderland because I want to add some math tests to pages instead of CAPTCHAs (as the OCR software gets better, the CAPTCHAs are being made harder and harder and I find I have trouble with them myself and I don't want to lose user input because the CAPTCHA stumps them) and I wanted to show the equation using an image.</p>

<p>I'm about ready to drop back and punt and manually make up a bunch of small images containing single digits and then "paste" them together to make the equation I want the user to solve.</p>

<p>I've wasted enough time spinning my wheels on this that I could have had single digit images (and plus, minus, division, and multiplication signs) finished by now and probably most of the code to stitch them together.</p>

<p>Any one have any suggestions to get this code (or any such example) to actually work for me.</p>

<p>Any assistance will be GREATLY appreciated.</p>

<p>Bob</p>

<p><strong><em>_</em>__<em>_</em>__<em>_</em>__<em>_</em>__<em>_</em>__ Edited 2012-04-03 2334 CST</strong></p>

<p>It does not matter whether I have a header statement, to define the type of the contents, or not - The image is displayed.</p>

<p>Here's the code I'm now using:</p>

<pre><code>&lt;?php

if(!function_exists('imagettftext')) {
    fatal_error('Error: Server does not support PHP image generation') ;
}
// from php.net/manual/en/function.imagejpeg.php
// Create a blank image and add some text and send to browser
$im = imagecreatetruecolor(200, 60);
//$text_color = imagecolorallocate($im, 233, 14, 91);
$white = imagecolorallocate($im, 255, 255, 255);
$grey = imagecolorallocate($im, 128, 128, 128);
$black = imagecolorallocate($im, 0, 0, 0);
imagefilledrectangle($im, 0, 0, 200, 60, $white);
imagestring($im, 5, 5, 5,  'A Simple Text String without header', $black);

// Set the content type header - in this case image/jpeg
//header('Content-Type: image/jpeg');

// Output the image
imagejpeg($im);

// Free up memory
imagedestroy($im);
?&gt;
</code></pre>

<p>Here is the HTML which invokes it:</p>

<pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt;
&lt;html lang="en"&gt;&lt;head&gt;
&lt;meta content="text/html; charset=ISO-8859-1" http-equiv="content-type"&gt;&lt;title&gt;Test Create JPG&lt;/title&gt;
&lt;/head&gt;&lt;body&gt;
&lt;br&gt;&lt;img src="../php/createAJPG.php" alt="alt text of this image"&gt;
&lt;/body&gt;&lt;/html&gt;
</code></pre>

<p>Here's the source displayed by Firefox:</p>

<pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt;
&lt;html lang="en"&gt;&lt;head&gt;
&lt;meta content="text/html; charset=ISO-8859-1" http-equiv="content-type"&gt;&lt;title&gt;Test Create JPG&lt;/title&gt;
&lt;/head&gt;&lt;body&gt;
&lt;br&gt;&lt;img src="../php/createAJPG.php" alt="alt text of this image"&gt;
&lt;/body&gt;&lt;/html&gt;
</code></pre>

<p>If I un-comment the header statement, I get the same output as when it is commented out:</p>

<p>Here's the source with the header un-commented and the text changed:</p>

<pre><code>&lt;?php

if(!function_exists('imagettftext')) {
    fatal_error('Error: Server does not support PHP image generation') ;
}
// from php.net/manual/en/function.imagejpeg.php
// Create a blank image and add some text and send to browser
$im = imagecreatetruecolor(200, 60);
//$text_color = imagecolorallocate($im, 233, 14, 91);
$white = imagecolorallocate($im, 255, 255, 255);
$grey = imagecolorallocate($im, 128, 128, 128);
$black = imagecolorallocate($im, 0, 0, 0);
imagefilledrectangle($im, 0, 0, 200, 60, $white);
imagestring($im, 5, 5, 5,  'A Simple Text String with header', $black);

// Set the content type header - in this case image/jpeg
header('Content-Type: image/jpeg');

// Output the image
imagejpeg($im);

// Free up memory
imagedestroy($im);
</code></pre>

<p>I use the same HTML file to invoke and the source is the same.</p>

<p>I get the same results with I.E. 8</p>

<p>I have double and triple, quadrupole checked - actually I've lost count of how many times I've tested with and without the header statement - the results are the same.</p>

<p>The image is displayed regardless of whether not I have a header statement or not.</p>

<p>Any thoughts on this?</p>
