Subscribe to our RSS

Rotate Images Using JavaScript

Rotate Images Using JavaScript

Rotate images using JavaScript – is this even possible? Of course ;) Read this tutorial to find out how to rotate images using JavaScript, and the code is a cross-browser solution.

Ok, let’s start from the easiest part. Let’s say we have the following markup:

<img src="/article-sources/images/plane-1.jpg" alt="" id="image" />
<canvas id="canvas"></canvas>

The markup above adds the image that we will rotate and the CANVAS tag (which is used to display the rotated image). The CANVAS tag only works for current browsers such as FF, Opera, Chrome, IE8 and Safari. IE 6 and IE 7 do not support the CANVAS tag, so that we will remove it if browser is IE.

Now let’s review how we will rotate the image. Most current browsers supports the <canvas> object which actually allows for ‘rotate’ and ‘drawImage’ methods in 2D context, but the IE 6 and IE7 will not recognize this tag. So Microsoft invented rotation using their filters via DXImageTransform.Microsoft.BasicImage (here is a quick link to MSDN). The good news is that the filter works and is easy to use, but the bad news is that it supports only 4 angles (0, 90, 180 and 270 degrees). The code to rotate images for IE will look like this:

//  Use DXImageTransform.Microsoft.BasicImage filter for MSIE
>switch(degree){
     case 0: image.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(rotation=0)'; break;
     case 90: image.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(rotation=1)'; break;
     case 180: image.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(rotation=2)'; break;
     case 270: image.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(rotation=3)'; break;
}

And for browsers that support the CNAVAS tag, the code will look like this:


var cContext = canvas.getContext('2d');

var cw = img.width, ch = img.height, cx = 0, cy = 0;

//   Calculate new canvas size and x/y coorditates for image
>switch(degree){
     case 90:
          cw = img.height;
          ch = img.width;
          cy = img.height * (-1);
          break;
     case 180:
          cx = img.width * (-1);
          cy = img.height * (-1);
          break;
     case 270:
          cw = img.height;
          ch = img.width;
          cx = img.width * (-1);
          break;
}

//  Rotate image
canvas.setAttribute('width', cw);
canvas.setAttribute('height', ch);
cContext.rotate(degree * Math.PI / 180);
cContext.drawImage(img, cx, cy);

We have to change the X/Y coordinates for drawImage function. Otherwise it will not be visible in the viewport (see Figure B versus Figure C on the illustration below).

image-rotation-canvas-illustration

That’s it ;) Click the Demo to see it in action.

ajaxBlender.com

April 3, 2012

hi Lorenzo,

you could try try to use Image() object and it’s method load() before initializing canvas.

let us know if it works.

:)

Lorenzo

April 2, 2012

How can I autoload the image in the canvas at page load without wait that the user click on a rotate command?

wito

March 23, 2012

Very Nice tutorial. the rotate is work fine for me. just i stack on size of the image. because on this script is use the actual size off image. can some one help me with fixed size. sory for my engglish

Frank

February 5, 2012

Very nice tutorial! Is there any chance you have a similar tutorial that would rotate 2 frame/second video rather than the single frame? I’ve been trying to alter this script without much luck. IE works fine with the slow video, but FF does not.

Thank you!

Paul

September 18, 2011

I got this to work with multiple images well by instantiating an array that gets populated with new Image() and then passing each image through an encapsulated function that holds the unique parameters per image. The encapsulated function then prints each picture out, waiting for img.onload(), with a title and description. Output looks like you tacked images on a wall.

Jeff Foster

June 21, 2011

For the JavaScript handicapped there is also a way to do this with HTML – first export images as JPG or GIF, and the HTML would look something like this: img src=”/Images/Pic1.png” alt=”Pic1″ name=”Rotate_Me” width=”100″ height=”100″ id=”Rotate_Me”

cid

December 30, 2010

Let’s try that again… here’s a slight variation that works on Chrome:

http://bit.ly/hlbDua

cid

December 30, 2010

Here’s a slight variation that works for Chrome.

javascript:(function () {d=document;b=d.body;o=d.getElementsByTagName(’img’)[0]; o.setAttribute(’width’,'100%’);o.setAttribute(’height’,'100%’);w=o.width;h=o.height;n=new Image();n.src=o.src;sw=w/n.height;sh=h/n.width;s=(sw

Sabato

November 22, 2010

Hi,
Image dont seem to load in safari only after click on reset or rotate. Is there any solution for this?
thanks

Darren – ajaxBlender

December 17, 2009

Tobias,

We made a slight modifation to the code we created for this tutorial. You can see the updated version here: http://www.ajaxblender.com/article-sources/jquery/image-rotate/index-updated.html

This script will provide two functions: initRotateImage, which you should call first, to initialize the canvas. (You will notice that there is no CANVAS tag in the markup for this version.) Then use rotateImage(imageID, degree) to rotate images.

Hope this helps!

Tobias

December 15, 2009

Nope. There’s no way I’m going to figure this out by myself. I’m clicking on links that seem to actually load a new page with hash…or that’s how it looks to me. And I can’t figure out how I pass an image ID to the functions here. It’s a shame because this is exactly what I need to do, but I need to do it for 16 different images on the same page.

Tobias

December 15, 2009

Very cool! What if I wanted to have multiple rotatable images on the same page? How can I pass in the image ID to the function? Hopefully I can figure it out on my own…

Leave a comment

Your name

September 2, 2014

Spam protection. Enter result of expression you see in the box below.

8 + 3 =