Rotated image wont display in php

Question

So i am trying to create a compass to show wind direction.

 Function rotate($angle) {
     $original = imagecreatefrompng("img/Arrow.png");
     $compass = imagerotate($original, $angle, 0);
     return $compass;
 }

That will be displayed using some html that i am echoing. The variable angle is being passed from a database. The html on the php script looks like this:

<img src='".rotate($row['wind_dir'])."'/>

The image never displays, and clearly the browser does not know where it is.

When i view the html in my browser, the above line shows as

<img src="Resource id #4"/>

and when i click on it, it navigates to a 404.

What am i doing wrong? Have i forgotten a line in the image rotation function?

EDIT: Having tried some of the responses below, i get an image, but it only shows as a black box!

EDIT2:

Well after much fiddling, it turns out all that was needed was to the third value of imagerotate() to -1 as follows:

$original = imagecreatefrompng("img/goog.png");
$compass = imagerotate($original, $angle, -1);
imagealphablending($compass, true);
imagesavealpha($compass, true);
header('Content-Type: image/png');
imagepng($compass);
imagedestroy($compass);

Answer 1

You have to execute the function and send header: try like below, say our php file name is rotate.php :

rotate.php

function rotate($angle) {
     $original = imagecreatefrompng("test.png");
     $compass = imagerotate($original, $angle, 0);
     header('Content-Type: image/png');
     imagepng($compass);
     imagedestroy($compass);
 }

if(isset($_GET['angle'])){
 rotate($_GET['angle']);
}

THen in your html you can call the web resource i.e you php file as:

<img src="url_to_rotate.php?angle=90" />

Also remember to sanitize the GET input before executing it.

Answer 2

I posted a comment about using CSS or JS rotation instead but since then I've had a better idea.

The compass is always going to be Arrow.png in one of 360 positions.

Use a batch process in Photoshop or PHP to create 360 versions. One for each degree. Then you can just call Arrow_120.png for example for 120 degrees. You remove the issue with your existing code of creating images on the fly while avoiding compatibility issues with CSS / JS.

Answer 3

The displayed image should be a image file. To achieve this you should use imagejpeg();

So basically you should have 2 php files:

1: Creates the image file using your code and imagejpeg();

<?php

$original = imagecreatefrompng("img/Arrow.png");
$compass = imagerotate($original, $_GET['angle'], 0);
header('Content-Type: image/jpeg');
imagejpeg($compass);
?>

2: The php file that displays the image.

<img src='image.php?angle=".$row['wind_dir']."'/>

if you want just one file you could do the following:

<?php

$original = imagecreatefrompng("img/Arrow.png");
$compass = imagerotate($original, $_GET['angle'], 0);

ob_start();
imagepng($compass);
$stringdata = ob_get_contents(); 
ob_end_clean(); 

$imageData = base64_encode($stringdata);
$src = 'data: image/png;base64,'.$imageData;
echo '<img src="',$src,'">';
?>