简体   繁体   中英

PHP - Problems creating an image containg text

I'm trying to create an image containing text.

I've tried several examples I've found on the web, among them are:

http://php.net/manual/en/function.imagettftext.php

http://www.daftlogic.com/projects-text-to-image.htm

http://www.phpro.org/examples/Text-to-Image-with-GD.html

but I've tried others.

Let's take the one from daftlogic.com - http://www.daftlogic.com/projects-text-to-image.htm

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:

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

Search for that text and you'll find the code I'm testing.

I have tried the main example and it has failed with almost the same results.

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.

The PHP code: is

<?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);
?>

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.

Okay -

Here's the directory structure:

\testing -
      \phpmodules 
      \rootfolder

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

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.

"phpmodules" contains the files containing PHP code, no HTML, just PHP.

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

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.

daftlogic.php is in \\testing\\PHP

A file named "testinanotherone.php" is in \\testing\\rootfolder

The contents of that file are:

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

BY THE WAY - the directory structure 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.

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:

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

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.

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:

Under "General" testanotherone.php (PNG Image): Address: http://www.bobnovell.com/testing/rootfolder/testanotherone.php (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

Under "Media" Location: http://www.bobnovell.com/testing/rootfolder/testanotherone.php (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)

I'll skip "Permissions" and "Security"


This what IE shows when I view the page:

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


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

The "View Source" menu item IS available and the source is:

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

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.

In Firefox I get:

‰PNG  ��� IHDR���n������V,š���PLTE���é[an÷���fIDAT•c` `fxÄÀÃ`Ç ÀçÀä²41ƒ‚€˜Ë–Ý’Àq²@੤;{á0— œi 

In IE I get:

‰PNG  IHDRnV,šPLTEé[an÷fIDAT•c` `fxÄÀÃ`Ç ÀçÀä²41ƒ‚€˜Ë–Ý’Àq²@੤;{á0— œi 

The source in Firefox (with the header statement commented out in the code) is:

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

���
IHDR���n������V,š���PLTE���é[an÷���fIDAT•c` `fxÄÀÃ`Ç ÀçÀä²41ƒ‚€˜Ë–Ý’Àq²@੤;{á0—
œi

The source in IE (without the header statement) is:

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

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

Does anyone have any idea how to make this work?

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.

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

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.

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.

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.

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

Any assistance will be GREATLY appreciated.

Bob

_ __ _ __ _ __ _ __ _ __ Edited 2012-04-03 2334 CST

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

Here's the code I'm now using:

<?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);
?>

Here is the HTML which invokes it:

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

Here's the source displayed by Firefox:

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

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

Here's the source with the header un-commented and the text changed:

<?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);

I use the same HTML file to invoke and the source is the same.

I get the same results with IE 8

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.

The image is displayed regardless of whether not I have a header statement or not.

Any thoughts on this?

daftlogic.php directly outputs png image. So you need to put this in an img tag.

<img src="/web/path/to/daftlogic.php" width="110" height="20" alt="alt text of this image" />

Here /web/path/to/daftlogic.php means the browser accessible path of daftlogic.php .

Note :

  1. Width and height is necessary to prevent the browser from rendering the page again after loading the image to fix the image layout.
  2. Always use meaningful alt tag. This tag is mandatory spec

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

For the update part of your question

As long as you are putting the source in an image tag, no matter what the Content-type it sends browser will try to render it as an image. If you put a html file as src in an image tag, browser will treat it as a damaged image. It also preserves the space but doesn't display it.

<img src="foo.jpg" width="110" height="20" alt="alt text" /> <!-- Image shown --> 
<img src="foo.html" width="110" height="20" alt="alt text" /> <!-- Browser treats html as image and finds it damaged --> 

But image content type has advantage. If you directly load an image browser will obey the content type. Load daftlogic.php in browser. If you used content-type browser will show according to to content type. Otherwise browser will show it as text/html which is default content type of PHP.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM