Thursday, January 28, 2010

Fast image rotation using JavaScript

Five lines of JavaScript suffice to rotate the image on the left 180 degrees, at a processing speed of one million pixels per second.

Rotating an image 180 degrees turns out to be extremely easy -- and as good an illustration as any that JavaScript doesn't automatically have to mean "slow." The test image shown here (a 600 x 446-pixel JPEG) was rotated 180 degrees using the script below in only 262 milliseconds -- quite literally the blink of an eye. (Note that to use this script, you need the small Java app -- ImageMunger -- that I wrote about a few days ago.)

w = Image.getWidth();
h = Image.getHeight();
pixels = Image.getRGB( 0,0, w,h, null, 0, w );
Image.setRGB( 0,0, w,h, pixels.reverse(), 0, w );
Panel.updatePanel( );
The key to what's going on is the call to pixels.reverse(). When you call getRGB() on a BufferedImage, Java hands you back all the image's pixels in a one-dimensional array. Simply rewriting the array in reverse order has the effect of causing the image to paint lower-right-corner-first (if you know what I mean). It rotates the image 180 degrees.

The reverse() method of the Array object (built into JavaScript) is implemented in bytecode and runs at bytecode speed (as is true of all native methods). It means that the "main loop" (the pixel-reversal code) runs at compiled-code speed.

The real lesson here is that if you want your JavaScript code to run fast, you should take advantage, whenever you can, of native methods of the language. Those methods are nearly always implemented as hand-optimized C or Java -- as I discussed in an earlier post. It's free speed. Don't let it go to waste.


  1. Good information about the rotation of images fastly by using javascripts. Such a useful and very informative article. Keep blogging and thanks for sharing.

    image clipping image background removal

  2. very cool & good js code, thank you very much for sharing.

    Can you share this code on my JavaScript library?

    Awaiting your response. Thank

  3. You may want to have a look at http://intermedia.pixelboxx/ for a simple server solution with advanced image operations.

    Intermedia uses JavaScript as an imaging API, as well as an optional URL API for image operations.

  4. Professional movers and packers Hyderabad employ skilled individuals who have the experience to carry out your relocation with efficiency. They are expert in packing your goods, using the required equipment to move your household goods and ensuring their safety.
    Please Visit Our Website : Packers and Movers Hyderabad
    Packers and Movers Hyderabad
    Packers and Movers in Kondapur
    Packers and Movers in Gachibowli
    Packers and Movers in Kukatpally
    Packers and Movers in Chanda Nagar

  5. Therefore, the most crucial thing to look out for when searching for Hyderabad packers and movers is their level of reliability. However, it’s not only difficult to find best packers and movers Hyderabad but also to differentiate the right ones from the wrong guys.
    Movers and Packers in Kukatpally
    Movers and Packers in Miyapur
    Movers and Packers in Sainikpuri

  6. Packers and Movers in Mumbai achieve conceit in offering great packing and moving services at reasonable costs. We deal all types of packing and moving services in Mumbai and other main cities of India.
    Please Visit Our Website :
    Packers and Movers in Dadar
    Packers and Movers in Thane
    Packers and Movers in Panvel

  7. As a leading service provider for Packers and Movers in Mumbai we have a mission to provide the best services. Quality, excellence, politeness are the main attributes which we work upon to build the relation with our clients.
    Movers and Packers in Panvel
    Packers and Movers in Kamothe
    Movers and Packers in Vashi


Add a comment. Registration required because trolls.