Accessing Jpeg Exif Rotation Data in JavaScript on the Client Side

Accessing JPEG EXIF rotation data in JavaScript on the client side

If you only want the orientation tag and nothing else and don't like to include another huge javascript library I wrote a little code that extracts the orientation tag as fast as possible (It uses DataView and readAsArrayBuffer which are available in IE10+, but you can write your own data reader for older browsers):

function getOrientation(file, callback) {    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)         {            if (view.getUint16(offset+2, false) <= 8) return callback(-1);            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);}
// usage:var input = document.getElementById('input');input.onchange = function(e) {    getOrientation(input.files[0], function(orientation) {        alert('orientation: ' + orientation);    });}

<input id='input' type='file' />

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

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

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

How to apply EXIF orientation

To be sure the image displays correctly regardless of browser and exif orientation, you need to have javascript that does the rotation and puts the image on a canvas. This protects it from "double-rotation" where the rotation is natively supported, e.g. safari.

I solved this problem using the JavaScript-Load-Image project from github, which makes it very easy; see my answer here: JS Client-Side Exif Orientation: Rotate and Mirror JPEG Images

How to apply EXIF orientation

To be sure the image displays correctly regardless of browser and exif orientation, you need to have javascript that does the rotation and puts the image on a canvas. This protects it from "double-rotation" where the rotation is natively supported, e.g. safari.

I solved this problem using the JavaScript-Load-Image project from github, which makes it very easy; see my answer here: JS Client-Side Exif Orientation: Rotate and Mirror JPEG Images

Reading JPEG file to retrieve orientation information

Till a more seasoned expert chimes in, I've settled for reader.readAsArrayBuffer(file.slice(0, 128 * 1024));.

extract exif orientation data from image

Possible duplicate of this question.

thanks. here's the final code example to get orientation :

var b64 = "data:image/jpeg;base64,/9j/4AAQSkZJRgABA......";
var bin = atob(b64.split(',')[1]);
var exif = EXIF.readFromBinaryFile(new BinaryFile(bin));
alert(exif.Orientation);

---

Related Topics