image compress and rotation fix using exif for image upload file reader

 /*
                    var imag = e.target.result; 
                    let attach = {};
                    attach['fileName'] = component.get('v.storeName')+'.'+that.name.split('.')[1];//that.name;
                    attach['contentType'] = that.type;
                    attach['Body'] = imag.match(/,(.*)$/)[1];
                    record.fileToBeUploaded.push(attach);
                    */
                    console.log('==i am here==');
                    // blob stuff
                    var blob = new Blob([e.target.result]); // create blob...
                    //window.URL = window.URL || window.webkitURL;
                    //var blobURL = window.URL.createObjectURL(blob); // and get it's URL
                    var image = new Image();
                    image.src = e.target.result;
                    
                    image.onload = function() {
                       
                        var canvas = document.createElement('canvas');
                        // Set variables
                        var ctx = canvas.getContext("2d");
                        var exifOrientation = '';
                        var width = this.width,
                            height = this.height;
                        
                        console.log(width);
                        console.log(height);
                        
                        // Check orientation in EXIF metadatas
                        EXIF.getData(this, function() {
                            var allMetaData = EXIF.getAllTags(this);
                            exifOrientation = allMetaData.Orientation;
                            console.log('Exif orientation: ' + exifOrientation);
                        });
                        
                        // set proper canvas dimensions before transform & export
                        if (jQuery.inArray(exifOrientation, [5, 6, 7, 8]) > -1) {
                            canvas.width = height;
                            canvas.height = width;
                        } else {
                            canvas.width = width;
                            canvas.height = height;
                        }
                        
                        // transform context before drawing image
                        switch (exifOrientation) {
                            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:
                                ctx.transform(1, 0, 0, 1, 0, 0);
                        }
                        
                        // Draw img into canvas
                        ctx.drawImage(this, 0, 0, width, height);
                        var fileURL =  canvas.toDataURL(that.type,1.0); 
                        
                        //create a new canvas
                        //var newCanvas = document.createElement('canvas');
                        //var context = newCanvas.getContext('2d');
                        
                        //set dimensions
                        //newCanvas.width = oldCanvas.width;
                        //newCanvas.height = oldCanvas.height;
                        
                        //apply the old canvas to the new one
                        //context.drawImage(canvas, 0, 0);
                        
                        var maxWidth = 960;
                        var maxHeight = 960;
                        var Imgwidth = this.width;
                        var Imgheight = this.height;
                        var shouldResize = (Imgwidth > maxWidth) || (Imgheight > maxHeight);
                        
                       
                        var newWidth;
                        var newHeight;
                        
                        if (Imgwidth > Imgheight) {
                            newHeight = Imgheight * (maxWidth / Imgwidth);
                            newWidth = maxWidth;
                        } else {
                            newWidth = Imgwidth * (maxHeight / Imgheight);
                            newHeight = maxHeight;
                        }
                        
                        var newCanvas = document.createElement('canvas');
                        
                        newCanvas.width = newWidth;
                        newCanvas.height = newHeight;
                        
                        var context = newCanvas.getContext('2d');
                        
                        context.drawImage(canvas, 0, 0, newWidth, newHeight);
                        
                        var dataURL = newCanvas.toDataURL(fileType);
                        
                        
                        let attach = {};
                        attach['fileName'] = component.get('v.storeName')+'.'+that.name.split('.')[1];//that.name;
                        attach['contentType'] = that.type;
                        attach['Body'] = dataURL.match(/,(.*)$/)[1];
                        console.log('===attach====',attach);
                        record.fileToBeUploaded.push(attach);

https://github.com/exif-js/exif-js

proper image width and height ratio

for(var i =0; i< files.length; i++){
if (files[i]) {
var reader = new FileReader();
var that = files[i];
var fileType = files[i].type;
reader.fileName = files[i].name;
reader.size = files[i].size;
reader.onload = function (e) {

                var image = new Image();
                image.src = e.target.result;
                
                image.onload = function() {
                   
                    var canvas = document.createElement('canvas');
                    // Set variables
                    var ctx = canvas.getContext("2d");
                    var exifOrientation = '';
                    var width = this.width,
                        height = this.height;
                    
                    console.log(width);
                    console.log(height);
                    
                    // Check orientation in EXIF metadatas
                    EXIF.getData(this, function() {
                        var allMetaData = EXIF.getAllTags(this);
                        exifOrientation = allMetaData.Orientation;
                        console.log('Exif orientation: ' + exifOrientation);
                    });
                    
                    // set proper canvas dimensions before transform & export
                    if (jQuery.inArray(exifOrientation, [5, 6, 7, 8]) > -1) {
                        canvas.width = height;
                        canvas.height = width;
                    } else {
                        canvas.width = width;
                        canvas.height = height;
                    }
                    
                    // transform context before drawing image
                    switch (exifOrientation) {
                        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:
                            ctx.transform(1, 0, 0, 1, 0, 0);
                    }
                    
                    // Draw img into canvas
                    ctx.drawImage(this, 0, 0, width, height);
                    var fileURL = canvas.toDataURL(that.type,1.2);// canvas.toDataURL(that.type,1.0); 
                    
                                           
                    var maxWidth = 960;
                    var maxHeight = 960;
                    var srcWidth = canvas.width;
                    var srcHeight = canvas.height;
                    
                    var newWidth;
                    var newHeight;
                    
                    var ratio = Math.min(maxWidth / srcWidth, maxHeight / srcHeight);
                    
                    newWidth = srcWidth*ratio;
                    newHeight = srcHeight*ratio;
                    
                    var newCanvas = document.createElement('canvas');
                    
                    newCanvas.width = newWidth;
                    newCanvas.height = newHeight;
                    
                    var context = newCanvas.getContext('2d');
                    
                    context.drawImage(canvas, 0, 0, newWidth, newHeight);
                    
                    var dataURL = newCanvas.toDataURL(fileType, 1.2);
                    
                    
                    let attach = {};
                    attach['fileName'] = component.get('v.storeName')+'.'+that.name.split('.')[1];//that.name;
                    attach['contentType'] = that.type;
                    attach['Body'] = dataURL.match(/,(.*)$/)[1];
                    console.log('===attach====',attach);
                    record.fileToBeUploaded.push(attach);
                }
            }
            reader.readAsDataURL(files[i]);
        }