ImageMagick displays garbled text instead of image

Question

I am trying to use ImageMagick class functions in PHP. To get familiar with ImageMagick, I wrote a few lines of code in PHP to display a red square in my browser.

Instead of displaying a red square, I get garbled text. I know ImageMagick is installed because I can use ImageMagick functions to save the red square to a file.

Thanks in advance for any help for this newbie to ImageMagick and StackOverflow!

Here's my PHP code:

$image = new Imagick();
$image->newImage(100, 100, new ImagickPixel('red'));
$image->setImageFormat('png');
$image->writeImage("MyOutput.png");

header('Content-type: image/png');
echo $image;  //This causes just raw text to be displayed. :(

echo '<img src=MyOutput.png>'; //Displays a 100x100 red image!
                               //..So, ImageMagick IS installed.

Here's my full PHP file.

<!DOCTYPE html>
<head>
    <title>ImageMagick Test</title>
</head>
<body>
<?php

$image = new Imagick();
$image->newImage(100, 100, new ImagickPixel('red'));
$image->setImageFormat('png');

header('Content-type: image/png');
echo $image;
?>

</body>
</html>

score 1 · Accepted Answer · edited May 23 '17 at 12:01

The main problem you have is that you're sending Content-Type: image/png after putting some output. Once you put any output, PHP immediately sends all response headers and proceeds to the body part of response. The default Content-Type is text/html on most servers, so your browser is interpreting image content as HTML, and thats why you're seeing some garbage. It's a bit like opening PNG file in notepad.

See this question for more information about sending response headers

Also you can't return HTML and image content upon one request, so do not put any HTML in your image-generating file. The image is independent file and it has to be returned upon it's own, separate request, containing only headers, image bytes and nothing more.

This should work:

<?php
$image = new Imagick();
$image->newImage(100, 100, new ImagickPixel('red'));
$image->setImageFormat('png');

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

Note, that this is whole PHP file and you can't send any other output neither from outside of <?php ?> nor by echoing.

If you want to include your image into HTML you need a second file (it may be plain HTML), which should look as follows:

<!DOCTYPE html>
<head>
    <title>ImageMagick Test</title>
</head>
<body>
    <!-- here we're including our image-generating PHP script -->
    <img src="imagickTest.php">
</body>
</html>

Then you can refer either to PHP file if you want to see only image or to HTML file if you want to see image put into HTML context.

That didn't work. Here's my PHP file. It still displays garbled text instead of an image: ` ImageMagick Test newImage(100, 100, new ImagickPixel('red')); $image->setImageFormat('png'); header('Content-type: image/png'); echo $image; ?> — RobertH, Jul 18 '15 at 16:38
That worked! Thanks for taking the time to give me a detailed explanation, pamelus. I really appreciate it! — RobertH, Jul 18 '15 at 18:08
@pamelus I have some problems using this method when I try to use a pdf url that is stored in a variable. Could you possibly help me? — Steve Price, Feb 09 '17 at 13:26

ImageMagick displays garbled text instead of image

1 Answers1