Extjs 6 Picture taken have wrong orientation

currently I´m writing a App with Image capture capability. This for I use Extjs 6 with the modern Toolkit (only) and the Sencha Space! API.

When using the built in function "Ext.space.Camera.capture(){..} I can take pictures. When taking Pictures with an Iphone or my Nexus 5 the pictures are great and correctly. But if I use other Android devices (tetsted with:Samsung N3,Sony Z1,and some low budged Samsung devices) the pictures are rotated -90° and are cropped.

The Docu to the API: http://docs.sencha.com/webappmgr/api/Ext.space.Camera.html

My piece of code:

var promise = Ext.space.Camera.capture({
        source: 'camera',
        quality: 80,
        width: 1200,
        height: 1600,
        encoding:'jpg',
        //liefert Bas64 String
        destination: 'data'
    });

    //aufrufen dieser Funktion
    promise.then(function (data) {

        console.log(data);
        console.log(Ext.space.Camera);

        //Zeigt Aufgenommenes Bild im Viewer an
        var uploadview = Ext.create({
            xtype: 'imageviewer'
        });

After some research about this problem I found some old Sencha Touch entries with the same problem. They suggested to lower the resolution.Tried it down to 800 × 600 . No change.

Anyone with a solution?

greetings

I transform the Image using the Exif Data extracted from the image before sending it to server. Below method will also reduce the resolution of the image to max of 800*800.

Note: Here i'm using our own storage API.

/**
 * Process the Image
 *
 * 1. Changes the Orientation of the Image based on Exif Data
 * 2. Reduces the Resolution of the Image based on the Max Width and Max Height Config.
 * 3. Extracts the EXIF information from the Image.
 * 
 * @param {Object} config Image Configuration
 */
processImage :function(config) {
    Ext.log('Transforming Image');
    var me = this,
        maxWidth = config.maxHeight,
        maxHeight = config.maxWidth;

    var image = new Image();
    image.src = config.dataURL;
    image.onload = function() {

        var imgSize = me.imageSize(image.width, image.height, maxWidth, maxHeight),
            width = imgSize.width,
            height = imgSize.height,
            exifTags = undefined;

        // extract exif information
        EXIF.getData(image, function() {

            exifTags = EXIF.getAllTags(this);
            var orientation = exifTags.Orientation;

            Ext.log("Image Orientation :" + orientation);

            if (!imgSize.shouldResize && !orientation) {
                Ext.log('Image Resizing and Orientation Change is not Required');
                return Ext.callback(config.callback, config.scope,
                    [config.dataURL, image, exifTags]);
            }

            var canvas = document.createElement("canvas");
            if(orientation && orientation > 4) {
                canvas.width = height
                canvas.height = width
            }
            else {
                canvas.width = width;
                canvas.height = height;
            }

            var context = canvas.getContext("2d");
            switch (orientation) {
                case 1:
                    break;
                case 2:
                    // horizontal flip
                    context.translate(width, 0);
                    context.scale(-1, 1);
                    break;
                case 3:
                    // 180° rotate left
                    context.translate(width, height);
                    context.rotate(Math.PI);
                    break;
                case 4:
                    // vertical flip
                    context.translate(0, height);
                    context.scale(1, -1);
                    break;
                case 5:
                    // vertical flip + 90 rotate right
                    context.rotate(.5 * Math.PI);
                    context.scale(1, -1);
                    break;
                case 6:
                    // 90° rotate right
                    context.rotate(.5 * Math.PI);
                    context.translate(0, -height);
                    break;
                case 7:
                    // horizontal flip + 90 rotate right
                    context.rotate(0.5 * Math.PI);
                    context.translate(width, -height);
                    context.scale(-1, 1);
                    break;
                case 8:
                    // 90° rotate left
                    context.rotate(-.5 * Math.PI);
                    context.translate(-width, 0);
                    break;
                default:
            }
            context.drawImage(this, 0, 0, width, height);
            var dataURL = canvas.toDataURL(config.fileType);

            Ext.log('Image Resized to: ' + width + ' x ' + height);
            Ext.callback(config.callback, config.scope, [dataURL, image, exifTags]);
        });
    }
},

/**
 * Returns the Calculated Size of the Image.
 * 
 * @param {Number} width Original Width of the Image
 * @param {Number} height Original Height of the Image
 * @param {Number} maxWidth The maximum width that is allowed for Resize.
 * @param {Number} maxHeight The Maximum height that is allowed for Resize.
 */
imageSize: function(width, height, maxWidth, maxHeight) {
    var newHeight = width,
        newWidth = height,
        shouldResize = width > maxWidth || height > maxHeight;

    if (width > height) {
        newHeight = height * (maxWidth / width);
        newWidth = maxWidth;
    } else {
        newWidth = width * (maxHeight / height);
        newHeight = maxHeight;
    }
    return {
        width: newWidth,
        height: newHeight,
        shouldResize: shouldResize
    };
}

And here is how invoked it

    ImageUtils.processImage({
        dataURL: file.getDataURL(),
        maxWidth: 800,
        maxHeight: 800,
        fileType: file.getType(),
        callback: function(dataURL, image, exifTags) {
            Ext.log('Resized Image Size ' + dataURL.length);

            // Send the file to Server
            me.sendFile(dataURL, exifTags);
        }
    });