JS Client-Side Exif Orientation: Rotate and Mirror JPEG Images

The github project JavaScript-Load-Image provides a complete solution to the EXIF orientation problem, correctly rotating/mirroring images for all 8 exif orientations. See the online demo of javascript exif orientation

The image is drawn onto an HTML5 canvas. Its correct rendering is implemented in js/load-image-orientation.js through canvas operations.

Hope this saves somebody else some time, and teaches the search engines about this open source gem :)

Mederr's context transform works perfectly. If you need to extract orientation only use this function - you don't need any EXIF-reading libs. Below is a function for re-setting orientation in base64 image.Here's a fiddle for it. I've also prepared a fiddle with orientation extraction demo.

function resetOrientation(srcBase64, srcOrientation, callback) {  var img = new Image();      img.onload = function() {    var width = img.width,        height = img.height,        canvas = document.createElement('canvas'),        ctx = canvas.getContext("2d");    // set proper canvas dimensions before transform & export    if (4 < srcOrientation && srcOrientation < 9) {      canvas.width = height;      canvas.height = width;    } else {      canvas.width = width;      canvas.height = height;    }    // transform context before drawing image    switch (srcOrientation) {      case 2: ctx.transform(-1, 0, 0, 1, width, 0); break;      case 3: ctx.transform(-1, 0, 0, -1, width, height); break;      case 4: ctx.transform(1, 0, 0, -1, 0, height); break;      case 5: ctx.transform(0, 1, 1, 0, 0, 0); break;      case 6: ctx.transform(0, 1, -1, 0, height, 0); break;      case 7: ctx.transform(0, -1, -1, 0, height, width); break;      case 8: ctx.transform(0, -1, 1, 0, 0, width); break;      default: break;    }    // draw image    ctx.drawImage(img, 0, 0);    // export base64    callback(canvas.toDataURL());  };  img.src = srcBase64;};

If

width = img.width;height = img.height;var ctx = canvas.getContext('2d');

Then you can use these transformations to turn the image to orientation 1

Fromorientation:

1. ctx.transform(1, 0, 0, 1, 0, 0);
2. ctx.transform(-1, 0, 0, 1, width, 0);
3. ctx.transform(-1, 0, 0, -1, width, height);
4. ctx.transform(1, 0, 0, -1, 0, height);
5. ctx.transform(0, 1, 1, 0, 0, 0);
6. ctx.transform(0, 1, -1, 0, height, 0);
7. ctx.transform(0, -1, -1, 0, height, width);
8. ctx.transform(0, -1, 1, 0, 0, width);

Before drawing the image on ctx