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).

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