Trying to fix the orientation of image on client side with jQuery. [EXIF is not defined]

Question

I am trying to detect the EXIF data (Orientation) of an image and show it without being rotated when selected. For the image preview the FileReader API is being used. I was able to fix server side orientation but for frontend I have having trouble.

I am using this library to get the EXIF data of an image.

I have imported the exif.js to my project.

<script src="frontend/js/exif.js">

HTML

<input id="choose-img" accept="image/*" name="image" type="file" onchange="readURLimg(this);">
<img class="img-uploaded" id="img-file">

jQuery

function readURLimg(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();
        reader.onload = function(e) {
         /* Check Exif and fix orientation of image */
            EXIF.getData([0], function() {
                console.log('Exif=', EXIF.getTag(this, "Orientation"));
                switch(parseInt(EXIF.getTag(this, "Orientation"))) {
                    case 2:
                        $img.addClass('flip'); break;
                    case 3:
                        $img.addClass('rotate-180'); break;
                    case 4:
                        $img.addClass('flip-and-rotate-180'); break;
                    case 5:
                        $img.addClass('flip-and-rotate-270'); break;
                    case 6:
                        $img.addClass('rotate-90'); break;
                    case 7:
                        $img.addClass('flip-and-rotate-90'); break;
                    case 8:
                        $img.addClass('rotate-270'); break;
                }
            });

            $('#img-file').attr('src', e.target.result).width('50%').height('auto');

        reader.readAsDataURL(input.files[0]);
    }
}

In my console I am getting this error:

Uncaught ReferenceError: EXIF is not defined at FileReader.reader.onload

Any Suggestions?

Are you sure exif.js works with filereader data? From the docs I can only see it being used with image objects. — Manuel Otto, Oct 28 '17 at 14:55
@ManuelOtto I tried to follow this. https://stackoverflow.com/questions/28251338/jquery-image-preview-exif-rotation-issue/28843763#28843763 — Saurabh, Oct 28 '17 at 15:04

Manuel Otto · Accepted Answer · 2017-10-28T15:09:44.020

3

Does this work?

function readURLimg(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();
        reader.onload = function(e) {
            var img = $('#img-file')
            img.attr('src', e.target.result).width('50%').height('auto');
            fixExifOrientation(img)
        }
        reader.readAsDataURL(input.files[0]);
    }
}
function fixExifOrientation($img) {
    $img.on('load', function() {
        EXIF.getData($img[0], function() {
            console.log('Exif=', EXIF.getTag(this, "Orientation"));
            switch(parseInt(EXIF.getTag(this, "Orientation"))) {
                case 2:
                    $img.addClass('flip'); break;
                case 3:
                    $img.addClass('rotate-180'); break;
                case 4:
                    $img.addClass('flip-and-rotate-180'); break;
                case 5:
                    $img.addClass('flip-and-rotate-270'); break;
                case 6:
                    $img.addClass('rotate-90'); break;
                case 7:
                    $img.addClass('flip-and-rotate-90'); break;
                case 8:
                    $img.addClass('rotate-270'); break;
            }
        });
    });
}

edited Oct 28 '17 at 15:09

answered Oct 28 '17 at 14:57

Manuel Otto

6,410
1
18
25

Thank you for your answer. But with this I am not getting any log in the console and no preview of image is shown. – Saurabh Oct 28 '17 at 15:02
@Saurabh Ah, ok, I edited my post. You accidentally put the `readAsDataURL` inside the onload function. – Manuel Otto Oct 28 '17 at 15:10
It's declared as function argument. – Manuel Otto Oct 28 '17 at 15:13
Oh Sorry, I didn't see that. Let me try this one. – Saurabh Oct 28 '17 at 15:17
I am still getting EXIF is not defined on this `EXIF.getData($img[0], function()` – Saurabh Oct 28 '17 at 15:17
Is the EXIF library actually imported properly? can you check by entering EXIF into the dev-tools console (ctrl+shift+i on chrome) – Manuel Otto Oct 28 '17 at 15:19
I can see the file in being loaded in the Networks tab. But when I enter EXIF in the console, it shows EXIF is not defined. – Saurabh Oct 28 '17 at 15:23
Okay I found the problem.. the above function is written in another file `app.js` which was imported before `exif.js`. I just imported `exif.js` before `app.js` and it worked. Silly Mistake. Thanks for help. – Saurabh Oct 28 '17 at 15:27
can you please tell what i need to pass in EXIF.getData($img[0], function() {} ); , means what should be $img[0] , image url or image name or any other thing because i am not getting any image orientation and also what should be $image ? Thanks in advance. – Gaurang Sondagar Nov 28 '18 at 08:45
it gives me Uncaught TypeError: $img.on is not a function. i imported the library and copied the same code. still – newdeveloper Jul 17 '19 at 05:42

Trying to fix the orientation of image on client side with jQuery. [EXIF is not defined]

1 Answers1