Extjs 6 Снимок сделан неверно

Question

В настоящее время я пишу приложение с возможностью захвата изображений. Это для использования Extjs 6 с современным Toolkit (только) и Sencha Space! API.

При использовании встроенной функции «Ext.space.Camera.capture() {..} Я могу делать снимки. При съемке с помощью Iphone или моего Nexus 5 картинки великолепны и правильны. Но если я использую другие устройства Android (tetsted с: Samsung N3, Sony Z1, и некоторыми низкими сдвинулись устройствами Samsung) изображения поворачиваются -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 Я нашел некоторые старые записи Сенча Сен с той же проблемой. Они предложили снизить разрешение. Испытали его до 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); 
     } 
    });