Extjs 6 拍摄的照片方向错误

Question

目前我正在编写一个具有图像捕获功能的应用程序。这是因为我将 Extjs 6 与现代工具包（仅）和 Sencha Space 一起使用！ API.

当使用内置函数“Ext.space.Camera.capture(){..}时，我可以拍照。当用 Iphone 或我的 Nexus 5 拍照时，照片很棒而且正确。但是如果我使用其他 Android 设备（已测试 with:Samsung N3、索尼 Z1 和一些低预算的三星设备），图片会旋转 -90° 并被裁剪。

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

在对这个问题进行一些研究之后，我发现一些旧的 Sencha Touch 条目存在同样的问题。他们建议将 resolution.Tried 降低到 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);
        }
    });

Extjs 6 拍摄的照片方向错误

Extjs 6 Picture taken have wrong orientation

android

extjs

extjs6-modern