If you are a facebook geek like me, you must have noticed till now the image rotate functionality in the photo albums. Facebook allows you to rotate images 90 degree clockwise and anti-clockwise after image upload. If you haven’t tried that till now, below is a screenshot for your convenience.
Question:
But the question is how does facebook team succeed doing this in one click. Today I tried looking around for a solution over internet and I came across the inbuilt imagerotate functionality in PHP.
Problem:
Unfortunately the problem is that even if you have GD Library extension enabled in PHP, imagerotate function just doesn’t work. After some research I found that to enable imagerotate function inside PHP, you need to compile and build PHP manually and enable imagerotate while installing PHP. You can check your PHP installation support for imagerotate using the following command line:
php -r "var_dump(function_exists('imagerotate'));"
Solution:
Since I didn’t want to touch my current installation of PHP, ImageMagick came to my rescue. Below I will show you how did I achieve cloning facebook’s 90 degree rotation functionality and also added a custom degree rotation (functionality usually seen in collage tools).
Demo:
You can try a live demo of the application here:
http://abhinavsingh.com/webdemos/imagerotate/
Source Code:
Before you go ahead and try this demo, you will need to install imagemagick on your system. On debian and ubuntu this can be achieved by the following command:
apt-get install imagemagick
To make sure installation is alright, run the following command from the shell:
convert -version
You should see something like this:
Version: ImageMagick 6.2.4 02/10/07 Q16 http://www.imagemagick.org Copyright: Copyright (C) 1999-2005 ImageMagick Studio LLC
Convert is a command line utility provided by imagemagick. Read more about convert here.
The source code consists of the following files and folders:
- index.php : Generates the Frontend UI part for the application
- action.php : Responsible for handling requests and rotating image using imagemagick library
- style.css : Used for styling the UI
- script.js : Used for handling the horizontal slider
- images : This folder contains all the required images for the application. The image which we will be rotating left and right is “me.jpg”
action.php
// Image Path $image = "images/me.jpg"; $original = "images/me-original.jpg"; if($_POST['restore']) { exec("cp ".$original." ".$image); } else if($_GET['left'] == 1 || $_GET['right'] == 1 || $_POST['degree']) { // Rotation Degree if(isset($_GET['left'])) $degree = -90; if(isset($_GET['right'])) $degree = 90; if(isset($_POST['degree'])) $degree = $_POST['degree']; // rotate image if(is_numeric($degree)) exec("convert ".$image." -rotate ".$degree." ".$image); }
From the UI, a user can pass 4 kind of requests:
- Rotate Image 90 degree clockwise by clicking the button on bottom right corner
- Rotate Image 90 degree anti-clockwise by clicking the button on bottom right corner
- Rotate Image x degree, by choosing the value of x using horizontal slider on bottom left
- Restore the image back to the original self
action.php handles the incoming 4 cases, calculates $degree to rotate and passes as a parameters to the command line utility provided by imagemagick.
Download Code:
Download the complete source code from here:
http://abhinavsingh.googlecode.com/files/image-rotate-application.rar
Unzip into a folder, and make the images directory writable.
PS: Application not tested on IE browser
Don’t forget to share and leave a comment if you liked the post.
Cheers!
Pingback: XkiD | Facebook type image rotation and more using PHP and Javascript | blog.xkid.ro
Nice post. The demo is excellent too.
Nice post, provides a good base to build upon 🙂
Great tutorial. I will add this to http://tutlist.com
Pingback: Facebook type image rotation and more using PHP and Javascript …
Pingback: Twitted by charleslau
Not working
I am not sure why it should not, just rotated the image 123 degree. You may want to check out.
bakwaas bulki me to kahuga ghatia hai.
ye na to lamba hai na hi pura.
Pingback: 25 New & Useful PHP Techniques & Tutorials
Good work!!!
@parvindrabrar : Learn to appreciate the effort behind the work and criticize constructively rather than writing such dumb ass comments
didn’t work Leopard at first Installed ImageMagick w/ MacPorts all tests OK. it worked when I put full path of convert into script.
@Colleen Thanks for the pointer. I didn’t had a Mac when I wrote this post 🙁
how to learn complete php
Hi,
Nice tool, thanks.
Work perfect on safari. can it be modified to save the rotation into the image?..
Regards 🙂
Pingback: 25 New & Useful PHP Techniques & Tutorials | Web Development News
Hi Rene,
I think you can easily modify the script to save the rotated image, if it is not saved automatically.
Pingback: 35 Really Useful PHP Tutorials And Development Techniques | Smashing Buzz
Pingback: 22 Useful PHP Tips and Tutorials for Web Development | Vector N Pixel
Pingback: 25 New & Useful PHP Techniques & Tutorials « PIXEL SHOP
Pingback: 30 Useful PHP Tutorials « Web Creation in Cambodia
Pingback: Web Creation in Phnom Penh » 30 Useful PHP Tutorials
Pingback: 25 Useful PHP Techniques and Tutorials | Timesneed.com
Pingback: 25 New & Useful PHP Techniques & Tutorials | DevIphoneApp
Pingback: Amy N Boon » 25 New & Useful PHP Techniques & Tutorials
Hi Admin Help Me For Removing Error from This Code It is Basically a javascript code for Moving Text in webpage.
Code is:
Moving Text
div # one
{
height:20px;
width:60px;
position:absolute;
left:0px;
top:0px;
background-color:blue;
}
var x,y;
function fun()
{
x=0;
y=0;
set interval(“fun()”,50);
}
function fun1()
{
document.getElementbyId(“one”).style.left=x+”px”;
document.getElementbyId(“one”).style.top=y+”px”;
if(x<=1000)
x=x+5;
if(y<500)
y=y+10;
}
Hello
Pingback: 25 Nya och Användbara PHP Tekniker & handledningar | Artiklar
Pingback: 25 New & Useful PHP Techniques & Tutorials | Certalinx
Download link not working. can you please check.
And also can I implement this code in yii2 framework or is there any other way to achieve it?