It's not a question its about to share knowledge with millions of brothers like me. I've been working since few hours to rotate an image using PHP and jquery and replace image dynamically.This example will illustrate you more.
This example is based on Cakephp 2.5. So don't be panic. My Dom looks like
<div class="review-col campaign_image_upload_section">
<?php
echo $this->Campaign->image($campaign, 200, 200, true);
?>
</div>
In Html it returns like
<img alt="" src="http://192.168.100.96/XXX/XXX/XXX/files/timthumb.php?src=http://192.168.100.96/XXX/XXX/XXX/app/webroot/files/campaign/image/14/lost_home.jpg&q=95&w=200">
I've bound an jQuery event on rotate link. You could use simple html link with the roate_right class name. Event is bind on "rotate_right" class. My AJAX request looks like
$(".rotate_right").click(function (event) {
event.preventDefault();
$(".campaign_image_upload_section").html(loading());
$.ajax({
url: $(this).attr('href'),
type: "POST",
dataType: 'json',
success: function (res) {
if (res.status) {
//You only could replace image src too
$(".campaign_image_upload_section").html("<img src='"+decodeURIComponent(res.src)+"' width=200 height=200>");
}
else {
alert("error in rotating");
}
}
});
return false;
})
In jQuery's loading function I am only showing a loading image to particular div. My PHP function which is being called looks like
public function rotate_image_right() {
// File and rotation
//You could use $_GET or pass parameters to this function
$filename = $this->params->query('image');
//PHP's imagerotate function will rotate counter clock wise. If you give 90 degree it will rotate left. use 270 to rotate on time
$degrees = 270;
// Content type - (uncomment below line to show out put in the browser)
// header('Content-type: image/jpeg');
// Load
$source = imagecreatefromjpeg($filename);
// Rotate
$rotate = imagerotate($source, $degrees, 0);
//I am fetching my campaign because to set directory path.
$campaign = $this->Campaign->getData($this->params->query('id'));
// Output
//Set current file name
$cur_file = $this->params->query('image_name');
$path_info = pathinfo($cur_file);
strtolower($path_info['extension']);
try{
if ($path_info['extension'] == 'jpg' || $path_info['extension'] == 'jpeg') {
$function = 'imagejpeg';
} else {
$function = 'image' . $path_info['extension'];
}
{catch (Exception $e) {
// Handle invalid file
}
//My output directory - You change according to your uses
$output_dir = WWW_ROOT . "files/campaign/image/" . $campaign["Campaign"]["id"] . "/";
$function($rotate, $output_dir . $cur_file);
imagedestroy($rotate);
$response["status"] = true;
$response["src"] = urlencode(Router::url("/", true) . 'files/campaign/image/' . $campaign["Campaign"]["id"] . '/' . $cur_file);
//We must encode first to send back data to AJAX
echo json_encode($response);
exit;
}
Finally My call of this code is below
<?php echo $this->Html->link("Rotate", array("controller" => "campaigns", "action" => "rotate_image_right?image=" . WWW_ROOT . "files/campaign/image/" . $campaign["Campaign"]["id"] . "/" . $campaign["Campaign"]["image"] . "&id=" . $campaign["Campaign"]["id"] . "&image_name=" . $campaign["Campaign"]["image"]), array("class" => "rotate_right")); ?>