Rotating images using PHP and jQuery the fast way

Question

I wrote a python script that rotates an image 90 degrees. I am including the python code in case you want to see it;

#! /usr/bin/python
# This Python file uses the following encoding: utf-8


#argv[1] needs to be send formatted meaning spaces and paranthesis ARE problems

__author__="john"
__date__ ="$Aug 17, 2010 1:48:36 PM$"

server_directory="some_directory"

import os
import os.path
import sys
import Image

#for turkish characters
def tr(utf):
    return utf.decode('utf-8')

img_directory=sys.argv[1]
img_directory_orig=img_directory.replace("\ ", " ")
file_url_and_name=server_directory+img_directory_orig
im = Image.open(file_url_and_name)
im1=im.rotate(270)
out=file(file_url_and_name,"w")
im1.save(out,"JPEG")
out.close()

Simple enough. So what I used to do is simply when a link is clicked a sample link is as below;

echo '<div style="text-align: center ;margin-left: auto ; margin-right: auto ;"><a class="button" href="fotograf.php?open='.$going_to_open_dir.'&rotate=temp/'."m_".$fake_going_to_open_dir."_".$fake_entry.'&num=foto'.$a1.'" onclick="this.blur();"><span>90&deg; turn</span></a></div>';

So far so good. Oh and let me add the php code calling my nice little python app;

if(isset($_GET["rotate"]))
    {
        exec("python rotate_image.py ".$_GET["rotate"]);
        header("location: fotograf.php?open=".$_GET['open']."&num=".$_GET['num']."#".$_GET['num']);
    }

So my problem is: Even though my system works its just too slow. Especially when there is about 600 pictures waiting to be loaded each time a picture turns. My question is there a way to speed it up using jQuery(Ajax)? Basically what I'm trying to do is : I am simply trying to rotate one image among 600 images in a web page and saving the rotated version on the server without the need of reloading the whole page.

Answer 1

You seem to be creating the rotated version each time it's requested from the PHP script. Check if it already exists and only rotate if not.

In other words, in your PHP script, check if you already generated the rotated file before. If yes, don't run the python script again, just redirect to the rotated file.

Example of what you have now - before anything is run:

somefile.jpg

request.php?rotate=somefile.jpg:

rotate? yes -> exec python script

after the script finishes (it doesn't matter what exactly the filenames are):

somefile.jpg
somefile_rotated.jpg

So, at this point, you don't need to exec the python script again when requesting somefile.jpg, but you still do:

request.php?rotate=somefile.jpg:

rotate? yes -> exec python script // even though you already have the output file

What you could do:

request.php?rotate=somefile.jpg:

rotate? yes 
did we rotate the file already?  (=is there a rotated version on our server?)
   -> yes, redirect to it
   -> no, exec python script, then redirect to the rotated file

Answer 2

What in particular is too slow? There are lots of ways to speed this up:

• Cache the rotated images. This is the obvious one.
• Load the rotated images when the page is loaded, set to invisible. This will cause the browser to cache them
• AJAX a request for the images.

Answer 3

If you are happy to do this just in the browser, the tricks in this article will let you rotate any html content, including image tags.

-webkit-transform: rotate(-90deg); 
-moz-transform: rotate(-90deg); 
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);