Extjs 6拍攝的照片有錯誤的方向

Question

目前我正在寫一個具有圖像捕捉功能的應用程序。這爲我使用Extjs 6與現代工具包（僅）和Sencha空間！ API。

當使用內置函數「Ext.space.Camera.capture（）{..}我可以拍照。使用Iphone或Nexus 5拍照時，照片非常棒，但如果我使用其他Android設備（具有tetsted：三星N3，索尼Z1，和一些低沒有變化三星設備）的圖像被旋轉-90°，並且被裁剪

的的Docu到API：http://docs.sencha.com/webappmgr/api/Ext.space.Camera.html

我的一段代碼：

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

經過對這個p的一些研究我發現了一些老的Sencha Touch條目有同樣的問題。他們建議降低分辨率，降至800×600。不用找了。

任何人只要有辦法解決嗎？

問候

Answer 1

我將其發送到服務器之前，使用從圖像中提取的Exif Data變換圖像。下面的方法也會將圖像的分辨率降低到最大800 * 800。

注：在這裏，我用我們自己的存儲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 
    }; 
} 

這裏是

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