Many Library available for rotating the image object.
But, here we are rotating the image object using Jquery, Ajax and PHP.
Here using PHP GD library for rotating the image object.
There are many options to rotate the image object.
But, here we using simple method.
Note: In this example We used jpeg format Image. If you have to use png or gif then you have to use other function for create image. For example : for jpeg => imagecreatefromjpeg($filename), imagejpeg($rotate,”test_rot.jpeg”); You have to change underline text according to image format.
PHP function for rotating the image object : imagerotate ==> Rotate an image with a given angle
Syntax :
resource imagerotate ( resource
Where,
image : An image resource, returned by one of the image creation functions, such as imagecreatetruecolor().
angle : Rotation angle, in degrees. The rotation angle is interpreted as the number of degrees to rotate the image anticlockwise.
bgd_color : Specifies the color of the uncovered zone after the rotation
ignore_transparent : If set and non-zero, transparent colors are ignored (otherwise kept).
More info : http://php.net/manual/en/function.imagerotate.php
Simple Example :
php_img_rotate.php :
<html>
<head>
<title>Simple Example : Rotating Images using PHP,Jquery & AJAX</title>
<!– Include Jquery Lib. –>
<script type=”text/javascript” src=”http://code.jquery.com/jquery-2.1.4.min.js”></script >
</head>
<body>
<!– Image which We have to rotate –>
<img id=”img_” src=”test_rot.jpeg”>
<!– There are controllers which used for rotate the images Anti Clock or Clock wise –>
<div>
<div class=”anti” style=”cursor: pointer”>Rotate Anti Clock Wise</div>
<div class=”clock” style=”cursor: pointer”>Rotate Clock Wise</div>
</div>
<!– Jquery Ajax Function for anti clock & Clock wise Rotate –>
<script type=”text/javascript”>
$(“.anti”).click(function()
{
$.ajax({
type:’POST’,
url:’ajax_img_rotate.php’,
data:”wh=anti”,
success:function(data)
{
//here we use this code for override the image. We use ? because If we not write that then your image is not refesh and
// If you refesh whole page then it will be changed., So, we write ? .
document.getElementById(“img_”).src = document.getElementById(“img_”).src+ “?”;
}
});
})
$(“.clock”).click(function()
{
$.ajax({
type:’POST’,
url:’php_img_rotate.php’,
data:”wh=clock”,
success:function(data)
{
document.getElementById(“img_”).src = document.getElementById(“img_”).src+ “?”;
}
});
})
</script>
</body>
</html>
Now,
ajax_img_rotate.php
<?php
// File name. We can pass the image name for more dynamic
$filename = ‘test_rot.jpeg’;
if($_POST[‘wh’]==”clock”) //Check Its clock wise rotate request or anti clock wise
{
$degrees = 360-90; // If clock wise then Degree is calculated here.
}else if($_POST[‘wh’]==”anti”)
{
$degrees = 90; /// If anti clock wise then Degree is calculated here.
}
// Load
//This function for jpeg format only if you have to use png or gif then you have to use different functions as per the image format
$source = imagecreatefromjpeg($filename);
// Rotate
$rotate = imagerotate($source, $degrees, 0);
// Output
//This function for jpeg format only if you have to use png or gif then you have to use different functions as per the image format
imagejpeg($rotate,”test_rot.jpeg”);
// Free the memory
imagedestroy($source);
imagedestroy($rotate);
?>
But, here we are rotating the image object using Jquery, Ajax and PHP.
Here using PHP GD library for rotating the image object.
There are many options to rotate the image object.
But, here we using simple method.
Note: In this example We used jpeg format Image. If you have to use png or gif then you have to use other function for create image. For example : for jpeg => imagecreatefromjpeg($filename), imagejpeg($rotate,”test_rot.jpeg”); You have to change underline text according to image format.
PHP function for rotating the image object : imagerotate ==> Rotate an image with a given angle
Syntax :
resource imagerotate ( resource
$image , float $angle , int $bgd_color [, int $ignore_transparent = 0 ] ) Where,
image : An image resource, returned by one of the image creation functions, such as imagecreatetruecolor().
angle : Rotation angle, in degrees. The rotation angle is interpreted as the number of degrees to rotate the image anticlockwise.
bgd_color : Specifies the color of the uncovered zone after the rotation
ignore_transparent : If set and non-zero, transparent colors are ignored (otherwise kept).
More info : http://php.net/manual/en/function.imagerotate.php
Simple Example :
php_img_rotate.php :
<html>
<head>
<title>Simple Example : Rotating Images using PHP,Jquery & AJAX</title>
<!– Include Jquery Lib. –>
<script type=”text/javascript” src=”http://code.jquery.com/jquery-2.1.4.min.js”></script >
</head>
<body>
<!– Image which We have to rotate –>
<img id=”img_” src=”test_rot.jpeg”>
<!– There are controllers which used for rotate the images Anti Clock or Clock wise –>
<div>
<div class=”anti” style=”cursor: pointer”>Rotate Anti Clock Wise</div>
<div class=”clock” style=”cursor: pointer”>Rotate Clock Wise</div>
</div>
<!– Jquery Ajax Function for anti clock & Clock wise Rotate –>
<script type=”text/javascript”>
$(“.anti”).click(function()
{
$.ajax({
type:’POST’,
url:’ajax_img_rotate.php’,
data:”wh=anti”,
success:function(data)
{
//here we use this code for override the image. We use ? because If we not write that then your image is not refesh and
// If you refesh whole page then it will be changed., So, we write ? .
document.getElementById(“img_”).src = document.getElementById(“img_”).src+ “?”;
}
});
})
$(“.clock”).click(function()
{
$.ajax({
type:’POST’,
url:’php_img_rotate.php’,
data:”wh=clock”,
success:function(data)
{
document.getElementById(“img_”).src = document.getElementById(“img_”).src+ “?”;
}
});
})
</script>
</body>
</html>
Now,
ajax_img_rotate.php
<?php
// File name. We can pass the image name for more dynamic
$filename = ‘test_rot.jpeg’;
if($_POST[‘wh’]==”clock”) //Check Its clock wise rotate request or anti clock wise
{
$degrees = 360-90; // If clock wise then Degree is calculated here.
}else if($_POST[‘wh’]==”anti”)
{
$degrees = 90; /// If anti clock wise then Degree is calculated here.
}
// Load
//This function for jpeg format only if you have to use png or gif then you have to use different functions as per the image format
$source = imagecreatefromjpeg($filename);
// Rotate
$rotate = imagerotate($source, $degrees, 0);
// Output
//This function for jpeg format only if you have to use png or gif then you have to use different functions as per the image format
imagejpeg($rotate,”test_rot.jpeg”);
// Free the memory
imagedestroy($source);
imagedestroy($rotate);
?>
