PHP header, Content type: image not allowing text

420

I have a variable ($output) that is set to a string.

To mekt this string an image I'm using the PHP: GD Library.

In particular the imagestring() function, which I'm using with a very slight modification:

<?php
// Create a 100*30 image
$im = imagecreate(100, 30);

// White background and blue text
$bg = imagecolorallocate($im, 255, 255, 255);
$textcolor = imagecolorallocate($im, 0, 0, 255);

// Write the string at the top left
imagestring($im, 5, 0, 0, $output, $textcolor); #here is my string $output

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

imagepng($im);
imagedestroy($im);
?>

This is working as expected: It turns$output into an image.

So, my problem is (or my best guess at least):

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

Which, doesn't allow me to output any html after that.

So I read this question, which asks if you can use two headers, which you can't, but the accepted answer recommends, something like this:<img src="my_img.php" />

This of course would be fine, except I don't know how would this solve my issues since, since even if I knew the source to this image (which I don't - so, that would be my first question, what's the path to the generated image*) I't would change the fact that the header is there and is not letting me output text.

So, I how would you approach this issue?

Thanks in advance!!


*I guess that would solve my issues since I could do this on an external file, and the just call the image (but maybe not since I would have to do an include and this would include the header too) as you see I'm a bit confused. Sorry :)


UPDATE:

So I'm seeing my question was confusing so I will add some more code to see if this clarifies my problem a little bit more:

<?php

$x = mt_rand(1,5);
$y = mt_rand(1,5);

function add($x, $y) { return $x + $y; }
function subtract($x, $y) { return $x - $y; }
function multiply($x, $y) { return $x * $y; }

$operators = array(
    'add',
    'subtract', 
    'multiply'
    );

$rdno = $operators[array_rand($operators)];

$result = call_user_func_array($rdno, array($x, $y));
session_start();
$_SESSION['res'] = $result;

if ($rdno == "add") {
    $whato = "+";
}elseif ($rdno == "subtract") {
    $whato = "-";
} else {
    $whato = "*";
}
$output = $x . $whato . $y . " = ";
?>
<form name="input" action="check.php" method="post">
<input type="text" name="result" />
<input type="submit" value="Check" />
</form>

I want$output to be a image so this got me trying to use the PHP:GD script above, but I can't make put in the same file because of the header.

996

Answer

Solution:

You need to make a separate PHP script which serves the image, then make an<img> tag that points to this script.

You can send information to the script using the querystring in the image URL.

562

Answer

Solution:

Morbo says: "Windmills do not work that way! Goodnight!"

Which means that you need to bone up on how this all works. This issue points to you having a basic misunderstanding of your tools. HTML can't contain images, it contains links to images. So your script needs to be included from another page via an image tag. (or CSS)

However, all this is a good thing. It means that this script can have dynamic elements that produce a new image each time it is called. Or that it could password-protect your images so only logged-in users can see it.

There are a host of ways to use this. And once you realize the image is like a page to php, this opens new routes. Php can output anything. Word docs, excel, pdf, css, even JS. all of which can be used to do cool things.

Just think of the image as a separate page. You'll get it. It'll just click into place in your mind. One of those big 'aha' moments.

464

Answer

Solution:

First, the path.

From the manual :

imagepng ( resource $image [, string $filename [, int $quality [, int $filters ]]] )

It means that if you don't give a second argument (it is the case here), you don't have the path to a file but the data of the file / image ressource. The php file will be understand as a png file by the browser thanks to the header you give.

Second :

In your page (ie index.php), you could add this like that

<img src="myimg.php?output=[...]" />

and in your php script myimg.php you have it like this :

<?php
$output = $_GET['output'] // getting your text

// Create a 100*30 image
$im = imagecreate(100, 30);

// White background and blue text
$bg = imagecolorallocate($im, 255, 255, 255);
$textcolor = imagecolorallocate($im, 0, 0, 255);

// Write the string at the top left
imagestring($im, 5, 0, 0, $output, $textcolor); #here is my string $output

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

imagepng($im);
imagedestroy($im);
?>

2 separates files.

909

Answer

Solution:

You can send the image inline withecho '<img src="data:image/png;base64,'. base64_encode(imagepng($im)) .'" /> instead of<img src="my_img.php">.
Do not set a content-type header! Your output is text/html what you don't have to announce as it's the default in most server setups.

360

Answer

Solution:

HTTP doesn't work that way. When your are serving image/png data, it as if you are serving a png file from the site, not an html file with an image in it. What are you trying to accomplish?

242

Answer

Solution:

my_img.php is not source to your image. It is a source to the script generating that image, or reading it from file and outputting directly into browser. Obviously the approach with img src would be the best, because you'll hide all "boring" implementation of displaying image string behind browser's mechanisms.

People are also looking for solutions to the problem: php - jquery tree for items

Source

Didn't find the answer?

Our community is visited by hundreds of web development professionals every day. Ask your question and get a quick answer for free.

Ask a Question

Write quick answer

Do you know the answer to this question? Write a quick response to it. With your help, we will make our community stronger.

Similar questions

Find the answer in similar questions on our website.