EXIF image orientation CSS transform fix / fix orientation of image picked from local FS without canvas

EXIF image orientation CSS transform fix.js

/*
 * This gist will help you to fix orientation
 * of image picked from local FS
 * without canvas.
 * CSS-only!
 * 
 * @expample
 * const img = document.createElement('img')
 * img.src = URL.createObjectURL(file)
 * img.style.transform = ORIENT_TRANSFORMS[ getOrientation(file) ]
 */

const ORIENT_TRANSFORMS = {
    1: '',
    2: 'rotateY(180deg)',
    3: 'rotate(180deg)',
    4: 'rotate(180deg) rotateY(180deg)',
    5: 'rotate(270deg) rotateY(180deg)',
    6: 'rotate(90deg)',
    7: 'rotate(90deg) rotateY(180deg)',
    8: 'rotate(270deg)'
}

/*
 * http://stackoverflow.com/a/32490603
 */
function getOrientation( file ) {
    return new Promise( ( resolve, reject ) => {
        const reader = new FileReader();

        reader.onerror = reject
        
        reader.onload = ( { target } ) => {
            try {
                const view = new DataView( target.result ),
                      length = view.byteLength
                let offset = 2

                if( view.getUint16(0, false) != 0xFFD8 ) {
                    return reject( new Error( 'File is not a .jpeg' ) )
                }

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

                    if (marker == 0xFFE1) {
                        if( view.getUint32( offset += 2, false ) != 0x45786966 ) {
                            return resolve()
                        }

                        const little = view.getUint16(offset += 6, false) == 0x4949
                        offset += view.getUint32(offset + 4, little)

                        const tags = view.getUint16(offset, little)
                        offset += 2

                        for( var i = 0; i < tags; i++ ) {
                            if( view.getUint16( offset + ( i * 12 ), little ) == 0x0112 ) {
                                return resolve( view.getUint16( offset + ( i * 12 ) + 8, little ) )
                            }
                        }

                    } else if( ( marker & 0xFF00 ) != 0xFF00 ) {
                        break;
                    } else {
                        offset += view.getUint16( offset, false )
                    }
                }

                return resolve()
            } catch( err ) {
                return reject( err )
            }
        };
        
        reader.readAsArrayBuffer( file.slice( 0, 64 * 1024 ) );
    } )
}

Cool thanks, although it does not keep the image aligned to the top left corner.
See http://stackoverflow.com/questions/18531698/css-rotate-image-and-align-top-left

https://github.com/Sobesednik/exif2css

@z-vr Thanks for idea about transfrom-origin fix for non-square images.
And also its nice to know that this snippet inspired you to build your own solution!

Thanks a lot for this gist @nezed! I used parts of your code for my class-based version, wrapped in an ES6 module. I think this might spare some time for people to add it in their projects. Here you go: https://gist.github.com/vdavid/3f9b66b60f52204317a4cc0e77097913