jpeg rotation using imagerotate - php

Question

I have a database which includes a table of jpeg photo data. This data has been sent to the database from an iPad app and can be displayed in a webpage using the following:
$photo_query = "SELECT photoID, photoData FROM tblPhotos;";
$resultPhotos = mysqli_query($connect, $photo_query);
while($rowPhotos = mysqli_fetch_array($resultPhotos)) { ?>
<div id="photo"> <?php
echo '<img src="data:image/jpeg;base64,' . base64_encode($row['photoData']) .'"/>';
</div>
}
This works fine and the image displays correctly.
I am now looking to add a simple tool to rotate this image. Below the image is a simple and when this is clicked the javascript function updatePhoto is called with the photoID:
<div onclick="updatePhoto('<?php echo $photoID; ?>')">Rotate</div>
JAVASCRIPT
function updatePhoto(photoID) {
$.post("photoChange.php", {
photoToChange: photoID
},
function(data, status){
document.getElementById('photo').innerHTML = "<img src='data:image/jpeg;base64, base64_encode(" + data + ")'/>";
});
}
PHOTOCHANGE.PHP
$photoID = $_POST['photoToChange');
$select_photo_query = "Select photoData From tblPhotos where photoID= '" . $photoID ."';";
$resultPhotos = mysqli_query($connect, $select_photo_query);
while($rowPhotos = mysqli_fetch_array($resultPhotos)) {
$source = $rowPhotos['photoData'];
}
$degrees=90;
$image = imagecreatefromstring ($source);
$rotate = imagerotate($image, $degrees, 0);
$finalImage = imagejpeg($rotate);
//step to convert jpeg back to binary needed?
echo $finalImage;
This all works in that the photoID is sent to photoChange.php, the source is retrieved from the database etc and data is sent back and placed into the page. But it does not display an image, just lots of data. I know I have a coding issue here but I am not sure exactly what.
I have tried removing all the rotation detail and simply echoing the $source unchanged and this does not replace the image with itself but with lines of data instead. So I wonder if there is an issue when posting data and echoing data back whether I need to stipulate a coding method being used?
Any assistance much appreciated.

Answer 1

Go to: http://php.net/imagejpeg
It returns a boolean value and directly dumps the image to the output.
$finalImage = imagejpeg($rotate);
//step to convert jpeg back to binary needed?
echo $finalImage;
Instead of this, add the content type and let the image render straight (you don't need echo, echo is implicit on imagejpeg()):
header('Content-Type: image/jpeg');
imagejpeg($rotate);
More problems:
You have <div id="photo"> in a while loop, which makes your ID not unique, it can't work when you have more than 1 picture
Another problem:
You interpolate PHP in Javascript a way it won't work ever. Replace the line by this with fixed concatenation:
.innerHTML = "<img src='data:image/jpeg;base64, " + data + "'/>";
Put the base64 encode in the image creation step, we make use of output buffer there:
header('Content-Type: text/plain');
ob_start();
imagejpeg($rotate);
$binary = ob_get_contents();
echo base64_encode($binary);
ob_end();