By flexponsive


2013-12-15 22:41:21 8 Comments

Digital camera photos are often saved as JPEG with an EXIF "orientation" tag. To display correctly, images need to be rotated/mirrored depending on which orientation is set, but browsers ignore this information rendering the image. Even in large commerical web apps, support for EXIF orientation can be spotty 1. The same source also provides a nice summary of the 8 different orientations a JPEG can have:

Summary of EXIF Orientations

Sample images are available at 4.

The question is how to rotate/mirror the image on the client side so that it displays correctly and can be further processed if necessary?

There are JS libraries available to parse EXIF data, including the orientation attribute 2. Flickr noted possible performance problem when parsing large images, requiring use of webworkers 3.

Console tools can correctly re-orient the images 5. A PHP script solving the problem is available at 6

10 comments

@WunderBart 2016-11-29 13:49:38

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;
};

@Ryan Casas 2017-08-14 08:42:37

The default case in the orientation switch is not needed, since that transformation doesn't do anything. Also, consider using srcOrientation > 4 && srcOrientation < 9 instead of [5,6,7,8].indexOf(srcOrientation) > -1, because it's faster and less resource intensive (both RAM & CPU). There's no need to have an array there. This is important when batching lots of images, where every bit count. Otherwise, pretty good answer. Upvoted!

@WunderBart 2017-08-15 13:31:52

@RyanCasas I wasn't aware of how heavy can indexOf be comparing to what you proposed. I ran a simple loop with 10M iterations and it was 1400% faster. Nice :D Thanks a bunch!

@statler 2017-10-30 10:19:59

This is a great answer. Much tighter than the accepted answer. You can make this faster by testing the orientation before rotating, because if it is the right way around, there is no need to do anything. In my case this is 75% of all images. I have added an example as an answer which includes an integration of both the getorientation and resetorientation functions

@ndreisg 2018-03-27 14:31:39

I used this answer in a Android WebView and it turned out, that there are some Android devices, that don't support WebGL within a WebView (see bugs.chromium.org/p/chromium/issues/detail?id=555116) The rotation can take very long on such devices depending on the size of the image.

@Oliver Joseph Ash 2019-01-14 21:23:05

When used with the referenced getOrientation, I am curious whether this is efficient in terms of performance. getOrientation calls fileReader.readAsArrayBuffer, and then we call URL.createObjectURL and pass the result into resetOrientation, which loads this URL as an image. Does this mean the image file will be "loaded"/read by the browser not once but twice, or do I misunderstand?

@Oliver Joseph Ash 2019-01-15 07:49:03

Also, what to do about browsers where the orientation will already be respected? I believe this is the case for iOS Safari, and in browsers supporting CSS image-orientation: from-image when it is used.

@gilbert-v 2019-09-14 15:50:21

One liner anyone?

I haven't seen anyone mention the browser-image-compression library. It's got a helper function perfect for this.

Usage: const orientation = await imageCompression.getExifOrientation(file)

Such a useful tool in many other ways too.

@masterxilo 2019-11-06 08:20:55

This gets the orientation. But how do I produce a new .jpg File object on the client side using this information?

@gilbert-v 2019-11-13 09:49:59

You can't create File objects as far as I know. The next best thing would be to send the image and the orientation up to the server, and do file manipulation there. Or you could generate a base64 string using canvas and the toDataURL method.

@masterxilo 2019-11-15 08:09:57

No you can create a File object from a Blob just fine. File File( Array parts, String filename, BlobPropertyBag properties ); developer.mozilla.org/de/docs/Web/API/File

@gilbert-v 2019-11-16 14:39:22

Gold sticker! @masterxilo

@cjd82187 2019-11-26 13:13:24

This worked great for me! I had been struggling with orientations for the last 2 days! All the transform switch statements that were posted wouldn't handle portrait images from my phone for some reason, there would be black bars. Probably because I was trying to compress and rotate at the same time.

@Mederr 2015-07-07 15:36:58

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

From orientation:

  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

@Muhammad Umer 2016-03-27 14:44:38

what is even happening in here?

@Brenden 2016-04-26 05:59:53

With this you just need to know the orientation (e.g. via EXIF) and then rotate as needed. Half of what I am looking for.

@Andy Lorenz 2016-06-10 13:57:32

these transformations didn't work for me - instead I used the code from the load-image project at github.com/blueimp/JavaScript-Load-Image/blob/master/js/… to get what I believe is well-proven code which uses both translate, rotate operations on the canvas context plus a width/height swap. Gave me 100% results after many hours of experimentation with other attempts at transforming etc

@AlxVallejo 2017-12-05 17:39:19

Why does it matter when you draw the image on ctx? You can't rotate the canvas after drawing an image on it?

@Giorgio Barchiesi 2019-04-24 21:46:46

Rotation for orientation 8 works this way for me: ctx.transform(0, -1, 1, 0, 0, height);

@Thom 2018-03-18 16:12:07

I've written a little php script which rotates the image. Be sure to store the image in favour of just recalculate it each request.

<?php

header("Content-type: image/jpeg");
$img = 'IMG URL';

$exif = @exif_read_data($img,0,true);
$orientation = @$exif['IFD0']['Orientation'];
if($orientation == 7 || $orientation == 8) {
    $degrees = 90;
} elseif($orientation == 5 || $orientation == 6) {
    $degrees = 270;
} elseif($orientation == 3 || $orientation == 4) {
    $degrees = 180;
} else {
    $degrees = 0;
}
$rotate = imagerotate(imagecreatefromjpeg($img), $degrees, 0);
imagejpeg($rotate);
imagedestroy($rotate);

?>

Cheers

@statler 2017-10-30 10:18:18

WunderBart's answer was the best for me. Note that you can speed it up a lot if your images are often the right way around, simply by testing the orientation first and bypassing the rest of the code if no rotation is required.

Putting all of the info from wunderbart together, something like this;

var handleTakePhoto = function () {
    let fileInput: HTMLInputElement = <HTMLInputElement>document.getElementById('photoInput');
    fileInput.addEventListener('change', (e: any) => handleInputUpdated(fileInput, e.target.files));
    fileInput.click();
}

var handleInputUpdated = function (fileInput: HTMLInputElement, fileList) {
    let file = null;

    if (fileList.length > 0 && fileList[0].type.match(/^image\//)) {
        isLoading(true);
        file = fileList[0];
        getOrientation(file, function (orientation) {
            if (orientation == 1) {
                imageBinary(URL.createObjectURL(file));
                isLoading(false);
            }
            else 
            {
                resetOrientation(URL.createObjectURL(file), orientation, function (resetBase64Image) {
                    imageBinary(resetBase64Image);
                    isLoading(false);
                });
            }
        });
    }

    fileInput.removeEventListener('change');
}


// from http://stackoverflow.com/a/32490603
export function getOrientation(file, callback) {
    var reader = new FileReader();

    reader.onload = function (event: any) {
        var view = new DataView(event.target.result);

        if (view.getUint16(0, false) != 0xFFD8) return callback(-2);

        var length = view.byteLength,
            offset = 2;

        while (offset < length) {
            var marker = view.getUint16(offset, false);
            offset += 2;

            if (marker == 0xFFE1) {
                if (view.getUint32(offset += 2, false) != 0x45786966) {
                    return callback(-1);
                }
                var little = view.getUint16(offset += 6, false) == 0x4949;
                offset += view.getUint32(offset + 4, little);
                var tags = view.getUint16(offset, little);
                offset += 2;

                for (var i = 0; i < tags; i++)
                    if (view.getUint16(offset + (i * 12), little) == 0x0112)
                        return callback(view.getUint16(offset + (i * 12) + 8, little));
            }
            else if ((marker & 0xFF00) != 0xFF00) break;
            else offset += view.getUint16(offset, false);
        }
        return callback(-1);
    };

    reader.readAsArrayBuffer(file.slice(0, 64 * 1024));
};

export 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;
}

@Steven Lambert 2018-06-14 20:10:22

Great approach. You should also consider handling the -2 and -1 return from getOrientation so you don't try to rotate non-jpgs or images without rotation data.

@mindplay.dk 2018-12-28 13:13:16

I made more optimizations, see my comment above - I just added your file.slice() optimization as well, but the real boost comes from using smaller images and image/jpeg output format to create smaller data URLs. (there is no noticeable delay even for 10-megapixel images.)

@Mark 2019-12-06 22:34:45

Careful with file.slice(), as you will prevent support of base64 image sources.

@statler 2019-12-08 02:39:45

Thanks mark - care to provide an edit for an alternative?

@runxc1 Bret Ferrier 2017-10-18 16:28:12

For those who have a file from an input control, don't know what its orientation is, are a bit lazy and don't want to include a large library below is the code provided by @WunderBart melded with the answer he links to (https://stackoverflow.com/a/32490603) that finds the orientation.

function getDataUrl(file, callback2) {
        var callback = function (srcOrientation) {
            var reader2 = new FileReader();
            reader2.onload = function (e) {
                var srcBase64 = e.target.result;
                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
                    callback2(canvas.toDataURL());
                };

                img.src = srcBase64;
            }

            reader2.readAsDataURL(file);
        }

        var reader = new FileReader();
        reader.onload = function (e) {

            var view = new DataView(e.target.result);
            if (view.getUint16(0, false) != 0xFFD8) return callback(-2);
            var length = view.byteLength, offset = 2;
            while (offset < length) {
                var marker = view.getUint16(offset, false);
                offset += 2;
                if (marker == 0xFFE1) {
                    if (view.getUint32(offset += 2, false) != 0x45786966) return callback(-1);
                    var little = view.getUint16(offset += 6, false) == 0x4949;
                    offset += view.getUint32(offset + 4, little);
                    var tags = view.getUint16(offset, little);
                    offset += 2;
                    for (var i = 0; i < tags; i++)
                        if (view.getUint16(offset + (i * 12), little) == 0x0112)
                            return callback(view.getUint16(offset + (i * 12) + 8, little));
                }
                else if ((marker & 0xFF00) != 0xFF00) break;
                else offset += view.getUint16(offset, false);
            }
            return callback(-1);
        };
        reader.readAsArrayBuffer(file);
    }

which can easily be called like such

getDataUrl(input.files[0], function (imgBase64) {
      vm.user.BioPhoto = imgBase64;
});

@Mr.Trieu 2018-06-12 09:37:59

Thank after over 2-hour search by google I find the right solution.

@dewd 2018-08-08 18:05:09

why would someone be lazy to prefer a much lighter solution?

@mindplay.dk 2018-12-28 13:01:38

Ported to Typescript and optimized from about 4 seconds to ~20 milliseconds. Base64 encoding was the bottleneck - using image/jpeg instead of the default image/png, and resizing the output image to a maximum width (400px in my case) made a massive difference. (this works well for thumbnails, but if you have to display the full image, I'd suggest avoiding base64 and simply inject the canvas element directly into the page...)

@Sergey S 2017-09-02 11:01:34

I am using mixed solution (php+css).

Containers are needed for:

  • div.imgCont2 container needed to rotate;
  • div.imgCont1 container needed to zoomOut - width:150%;
  • div.imgCont container needed for scrollbars, when image is zoomOut.

.

<?php
    $image_url = 'your image url.jpg';
    $exif = @exif_read_data($image_url,0,true);
    $orientation = @$exif['IFD0']['Orientation'];
?>

<style>
.imgCont{
    width:100%;
    overflow:auto;
}
.imgCont2[data-orientation="8"]{
    transform:rotate(270deg);
    margin:15% 0;
}
.imgCont2[data-orientation="6"]{
    transform:rotate(90deg);
    margin:15% 0;
}
.imgCont2[data-orientation="3"]{
    transform:rotate(180deg);
}
img{
    width:100%;
}
</style>

<div class="imgCont">
  <div class="imgCont1">
    <div class="imgCont2" data-orientation="<?php echo($orientation) ?>">
      <img src="<?php echo($image_url) ?>">
    </div>
  </div>
</div>

@cwal 2019-10-11 03:58:01

Thanks, this seems like the best solution, for my needs anyways. No need for external libraries and no long blocks of unnecessary code. Just determine orientation from the exif with php, send it to the view and use it to trigger CSS classes that rotate the appropriate number of degrees. Nice and clean! Edit: this will over rotate images in browsers that actually read the exif data and rotate accordingly. AKA it will fix the issue on desktop but creates a new one on ios safari.

@Perry 2017-07-08 18:07:25

In addition to @fareed namrouti's answer,

This should be used if the image has to be browsed from a file input element

<input type="file" name="file" id="file-input"><br/>
image after transform: <br/>
<div id="container"></div>

<script>
    document.getElementById('file-input').onchange = function (e) {
        var image = e.target.files[0];
        window.loadImage(image, function (img) {
            if (img.type === "error") {
                console.log("couldn't load image:", img);
            } else {
                window.EXIF.getData(image, function () {
                    console.log("load image done!");
                    var orientation = window.EXIF.getTag(this, "Orientation");
                    var canvas = window.loadImage.scale(img,
                        {orientation: orientation || 0, canvas: true, maxWidth: 200});
                    document.getElementById("container").appendChild(canvas);
                    // or using jquery $("#container").append(canvas);
                });
            }
        });
    };
</script>

@Fareed Alnamrouti 2016-09-08 06:35:48

ok in addition to @user3096626 answer i think it will be more helpful if someone provided code example, the following example will show you how to fix image orientation comes from url (remote images):


Solution 1: using javascript (recommended)

  1. because load-image library doesn't extract exif tags from url images only (file/blob), we will use both exif-js and load-image javascript libraries, so first add these libraries to your page as the follow:

    <script src="https://cdnjs.cloudflare.com/ajax/libs/exif-js/2.1.0/exif.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/blueimp-load-image/2.12.2/load-image.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/blueimp-load-image/2.12.2/load-image-scale.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/blueimp-load-image/2.12.2/load-image-orientation.min.js"></script>
    

    Note the version 2.2 of exif-js seems has issues so we used 2.1

  2. then basically what we will do is

    a - load the image using window.loadImage()

    b - read exif tags using window.EXIF.getData()

    c - convert the image to canvas and fix the image orientation using window.loadImage.scale()

    d - place the canvas into the document

here you go :)

window.loadImage("/your-image.jpg", function (img) {
  if (img.type === "error") {
    console.log("couldn't load image:", img);
  } else {
    window.EXIF.getData(img, function () {
        var orientation = EXIF.getTag(this, "Orientation");
        var canvas = window.loadImage.scale(img, {orientation: orientation || 0, canvas: true});
        document.getElementById("container").appendChild(canvas); 
        // or using jquery $("#container").append(canvas);

    });
  }
});

of course also you can get the image as base64 from the canvas object and place it in the img src attribute, so using jQuery you can do ;)

$("#my-image").attr("src",canvas.toDataURL());

here is the full code on: github: https://github.com/digital-flowers/loadimage-exif-example


Solution 2: using html (browser hack)

there is a very quick and easy hack, most browsers display the image in the right orientation if the image is opened inside a new tab directly without any html (LOL i don't know why), so basically you can display your image using iframe by putting the iframe src attribute as the image url directly:

<iframe src="/my-image.jpg"></iframe>

Solution 3: using css (only firefox & safari on ios)

there is css3 attribute to fix image orientation but the problem it is only working on firefox and safari/ios it is still worth mention because soon it will be available for all browsers (Browser support info from caniuse)

img {
   image-orientation: from-image;
}

@Perry 2017-07-08 14:56:30

Solution 1 did not work for me. It's returning window.loadImage is undefined

@Fareed Alnamrouti 2017-07-08 15:00:28

This happened if you didn't include the libraries I mention in step 1

@Perry 2017-07-08 15:23:14

I included the libraries. I like the simplicity of your example but I keep getting that error message.

@Perry 2017-07-08 15:44:56

I will like you to have a look at my code, but i am not sure if it is proper to paste to here.

@Fareed Alnamrouti 2017-07-08 16:34:14

it seems exif-js was broken, please check my edit i also have added full code on github: github.com/digital-flowers/loadimage-exif-example

@Perry 2017-07-08 17:37:19

Yea, this works now. Thanks for taking out time to update your answer. Well, it will be nice to include to that github project an example in which the image is browsed from a file input element. That's <input type="file" name="file" id="select-image" accept="image/*">

@Fareed Alnamrouti 2017-07-08 18:05:53

ok checkout the github project there is a new file "upload.html", you are welcome :)

@Petraeus 2017-10-04 16:34:11

This is the correct solution, the author is correct that Javascript Load Image does not read exif data from urls, hence the need for a secondary library. There is a small delay in reading exif data from large images but its less than a second.

@flexponsive 2013-12-15 22:41:21

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

@Gordon Sun 2015-07-14 05:31:02

I have been using this library but recently it broke on iOS 8.3 which is where I need it to work most :(

@igneosaur 2016-05-20 08:28:46

I'm really struggling to see how this is helpful. I'm playing around with it trying to learn it so I can either parse a page and rotate images when they need to be rotated, or detect orientation and rotate file (somehow) before actually uploading it. The demo does neither. It simply takes a file from a file input and displays it the right way, when is this useful in the real world? When I parse my page and feed the URLs from the image tags into the loadImage library there is no exif data so can't do that. For the upload it returns a canvas object so I can't send that to the server or anything.

@brannigan 2016-05-30 09:34:02

@igneosaur: you can send base64 encoded data to the server with canvas.toDataURL() and decode and save it server side.

@Andy Lorenz 2016-06-10 13:54:37

rather than use the load-image project, you can use some of its code-base to bake your own - just look in github.com/blueimp/JavaScript-Load-Image/blob/master/js/….

@lostintranslation 2016-06-24 17:33:34

I agree with @igneosaur, really struggling on how to use this library to pull jpeg images from a url and orient correctly. I don't have the file(s) local.

@Fareed Alnamrouti 2016-09-08 06:36:38

@lostintranslation please check my answer stackoverflow.com/a/39384061/427622

@Erik Berkun-Drevnig 2016-09-14 18:26:05

Is there any way to make the canvas that this library produces responsive like a regular <img> tag?

@Irfan Muhammad 2017-08-29 07:01:54

That works perfectly fine on angular. Thanks

@artuska 2017-12-27 11:22:36

Comrads, i really do not understand — Safari rotates an image taken from camera → i can fix its orientation with the loadImage library... but i get a «img src="blob:..."» — how do i change my original File object with the fixed image and upload it to the server?

@artuska 2017-12-27 11:43:36

Or i should send an original image to the server and backend should do all the orientation stuff?

@Amete Blessed 2018-05-16 15:55:02

Very helpful. Thanks.

@Oliver Joseph Ash 2019-01-16 08:32:10

I wouldn't consider using this library for multiple reasons because (1) GitHub issue tracker is closed and (2) the library does a lot more than just fix the orientation. Furthermore, as far as I can see it does not exclude the orientation fix from iOS Safari, where orientation is already automatically respected.

Related Questions

Sponsored Content

4 Answered Questions

2 Answered Questions

[SOLVED] Correcting Image Orientation server side in vb.net

8 Answered Questions

[SOLVED] Accessing JPEG EXIF rotation data in JavaScript on the client side

2 Answered Questions

[SOLVED] Detect EXIF Orientation and Rotate Image using ImageMagick

3 Answered Questions

[SOLVED] 90 degree image rotation and reset EXIF rotation

1 Answered Questions

[SOLVED] How to convert a JPEG to a JPEG with EXIF orientation 1?

  • 2017-10-26 19:42:28
  • dan9er
  • 572 View
  • 2 Score
  • 1 Answer
  • Tags:   image jpeg exif

0 Answered Questions

Fixing Image Orientation at javascript

1 Answered Questions

[SOLVED] Android: Rotate bitmap once or use EXIF orientation to rotate imageview

1 Answered Questions

2 Answered Questions

[SOLVED] Setting Android Photo EXIF Orientation

Sponsored Content