Php Generated Images Show Up as Gibberish in Browser

PHP
1

I have copied and pasted a number of different PHP scripts that I have found on the internet. I am trying to create an image from PHP and display it in the browser. All I get is garbage displayed:

ÿØÿà�JFIF������ÿþ�>CREATOR: gd-jpeg v1.0 (using IJG JPEG v62), default quality ÿÛ�C�aaaa    $.’ ",#(7),01444’9=82<.342ÿÛ�C  2!!22222…

I tried both with local host and a remote server to see if it was a set up with my local installation of PHP. Both PHP installations have GD support enabled as shown by running phpinfo():

GD Support enabled
GD Version bundled (2.0.34 compatible)
FreeType Support enabled
FreeType Linkage with freetype
FreeType Version 2.3.4
T1Lib Support enabled
GIF Read Support enabled
GIF Create Support enabled
JPG Support enabled

I read one place that you have to resize the image file or it will display as garbage, but it seems strange that none of the tutorials would include the resizing code. Any thoughts? Thanks!

2

What’s the Content-Type? You’re probably not sending it as an image mime type.

3

Send the following header before outputting your image, you need to tell the browser that you are sending image data and not HTML.

<?php
header('Content-Type: image/jpeg');
?>
4

In other words, put this before the image output code:

header('Content-Type: Image/JPEG');
Edit:

Darn it, silverB! :wink:

5

There is a content type defined in the head of the HTML and redefined in the PHP script later:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>
<html>
<head>
<meta http-equiv=“Content-Type" content="text/html; charset=iso-8859-1”>
<title>Untitled Document</title>
</head>

<body>
<?php
header(“Content-type: image/jpeg”);
session_start();

// generate 5 digit random number
$rand = rand(10000, 99999);

// create the hash for the random number and put it in the session
$_SESSION[‘image_random_value’] = md5($rand);

// create the image
$image = imagecreate(60, 30);

// use white as the background image
$bgColor = imagecolorallocate ($image, 255, 255, 255);

// the text color is black
$textColor = imagecolorallocate ($image, 0, 0, 0);

// write the random number
imagestring ($image, 5, 5, 8, $rand, $textColor);

// send several headers to make sure the image is not cached
// taken directly from the PHP Manual

// Date in the past
header(“Expires: Mon, 26 Jul 1997 05:00:00 GMT”);

// always modified
header(“Last-Modified: " . gmdate(“D, d M Y H:i:s”) . " GMT”);

// HTTP/1.1
header(“Cache-Control: no-store, no-cache, must-revalidate”);
header(“Cache-Control: post-check=0, pre-check=0”, false);

// HTTP/1.0
header(“Pragma: no-cache”);

// send the content type header so the image is displayed properly
header(‘Content-type: image/jpeg’);

// send the image to the browser
imagejpeg($image);

// destroy the image to free up the memory
imagedestroy($image);

?>
</body>
</html>

6

That script isn’t for embedding an image in the HTML.

It outputs an image. You wouldn’t put the contents of a JPEG file directly in HTML, would you?

Put that image creation in its own PHP file, and use the HTML img tag to allow the browser to display it.

7

I tried this:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>
<html>
<head>
<meta http-equiv=“Content-Type” content=“text/html; charset=iso-8859-1”>
<title>Untitled Document</title>
</head>
<body>
hello
<img src=“humandetect.php”>
</body>
</html>

humandetect.php:

[COLOR=“Purple”]<?php
//Create Canvas
$myImage=ImageCreate(300,300);

//Define Colors, First Color is BG Color
$black=ImageColorAllocate($myImage, 0, 0, 0);
$white=ImageColorAllocate($myImage, 255, 255, 255);
$red=ImageColorAllocate($myImage, 255, 0, 0);

//Draw Shapes
ImageRectangle($myImage, 50, 50, 200, 115, $red);
ImageRectangle($myImage, 50, 150, 200, 115, $white);

//Output to browser
header(“Content-type:image/png”);
ImagePng($myImage);

//Clean up
ImageDestroy($myImage);

?>

[/COLOR]

8

It works! Thank you.

9

You still should, in your humandetect.php, allow the file to be shown as an image instead of the raw image data.

10

Would you mind pointing me in the right direction so I can find out how?

11

On your humandetect.php just place this under the PHP opening tag (<?php)


header('Content-type: image/png');
12

If you look at his code you’ll see that its already there…

13

Whoops, I didn’t look all the way down through it, I just would have expected him to have put it closer to the top.

Saves from people seeing information about your generated images (from the errors) if they are enabled. Where source images are found… etc.

14

No, it doesn’t.

You can just save it to the computer and open it up in notepad.

The benefit of it is when the image is viewed directly in the browser.

15

No, I mean if you were doing this…


imagecreatefrompng('_images/user_store/avatar_template.png');

Say that failed, errors displayed without the header… the person now knows where this avatar_template is stored.

It might not seem that much, but if you don’t want someone to know where things are… that could be a problem.

That’s just my opinion though.

16

My point is that if you download the invalid image file as a text file and open it, you will see the errors like HTML.

Of course, you would use file_exists to make sure an image exists first, wouldn’t you.

17

Or

if (@imagecreatefrompng(...)) {

Because otherwise you’d have a race condition if you used file_exists().

18

Pardon my lack of knowledge on the subject of race conditions, but surely they affect file reading?

19

Because otherwise you’d have a race condition if you used file_exists().
I would have thought race conditions wouldn’t exist when reading a file, unless of course you locked it. :confused:

20

Well, in this case, it would unlikely to occur, but any time there’s more than one task that acts on a resource that isn’t locked, there’s a potential race condition.

file_exists()
…time delay…
imagecreatefrompng()

If file_exists() returns true, but then somehow the file disappears within that small time delay (which is especially significant when you have many visitors), the script will enter an undefined situation. In this case, PHP would spit out an error and an error for every line thereafter that uses the image resource returned by the function.

In this case, it’s not likely to be problematic (because the file is not going to be deleted often, I assume), and the worst case scenario is that someone sees a broken image, but it never hurts to make everything you write be atomic in execution if it isn’t hard.