Question

（我Ionic forum post的副本，但可能更适合SO。）

我创建了一个Ionic应用程序，它作为Drupal 8 Web门户的补充服务。门户网站用户可以使用他们的网络凭据登录应用程序，并且可以跨设备同步他们的用户信息。

其中一条信息是他们的个人资料图片。我进行了设置，以便用户可以从设备的照片库中选择一张图像，将其设置为应用程序中的个人资料图片，然后应用程序将图像转换为blob并将其发布到Web门户，然后更新它相应地在门户网站上。

执行此操作的代码如下（改编自https://stackoverflow.com/a/30896068/5306408）：

$scope.getPhoto = function() {

    getPic = function(type) {

        function picSuccess(imageURI) {
            window.resolveLocalFileSystemURL(imageURI, function(finalURI) {
                savepic(finalURI.nativeURL);
            }, function(err) {
                console.log(err);
            });
        }

        navigator.camera.getPicture(picSuccess, picError, {quality: 10, targetWidth: 800, encodingType: 0, correctOrientation: true, destinationType: navigator.camera.DestinationType.FILE_URI, saveToPhotoAlbum: false, sourceType: type});
    }

    picError = function(e) { console.log(e);}

    var photo_popup = $ionicPopup.show({ 
        template: "Would you like to change your photo?",
        scope: $scope,
        title: "Photo",
        cssClass: "photo-popup",
        buttons: [
            {text: '<b>Choose from gallery</b>', onTap: function(e) { getPic(0); },
            {text: "Cancel"}
        ]
    });
};

function savepic(finalURI) {
    var name = finalURI.substr(finalURI.lastIndexOf('/') + 1);
    var namePath = finalURI.substr(0, finalURI.lastIndexOf('/') + 1);
    var newPath = cordova.file.dataDirectory + name;
    $cordovaFile.copyFile(namePath, name, cordova.file.dataDirectory, name).then(function(info) {
        function addFormData() {
            d = $q.defer();
            var getFileBlob = function (url, cb) {
                var xhr = new XMLHttpRequest();
                xhr.open("GET", url);
                xhr.responseType = "blob";
                xhr.addEventListener('load', function() {
                    cb(xhr.response);
                }); 
                xhr.send();
            };

            var blobToFile = function (blob, name) {
                blob.lastModifiedDate = new Date();
                blob.name = name;
                return blob;
            };

            var getFileObject = function(filePathOrUrl, cb) {
                getFileBlob(filePathOrUrl, function (blob) {
                    cb(blobToFile(blob, 'output.jpg'));
                }); 
            };

            getFileObject(newPath, function (fileObject) {
                var dat = new FormData();
                dat.append('file', fileObject);
                dat.append('text', JSON.stringify({"imagedate": Date.now()}));
                d.resolve(dat);
            });
            return d.promise;
        }

        addFormData().then(function(dataform) {
            $http({method: 'POST', url: 'connector for portal service goes here', data: dataform, headers: {'Authorization': (auth header defined elsewhere), 'Content-Type': undefined}, transformRequest: angular.identity}).then(function(result) {
                //database logic
            }, function(e) {
                console.log(e);
            });
        });
    }, function(err) { console.log(err); });
}

从功能上讲，此代码有效。我遇到的问题是，设备上1.3 MB的图像有时会导致超过8 MB的发布请求。服务器无法接受较大且门户端更新失败的发布请求。

我见过像this one for PhoneGap这样的主题有同样的问题，但已接受的解决方案已经集成到我的代码中并且它仍然存在。我很难过。有谁知道为什么会发生这种情况？

Answer 1

我遇到了同样的问题。将destinationType从FILE_URI更改为NATIVE_URI对我来说解决了这个问题。文件大小没有增加，文件名也正确。

Cordova相机插件可能会膨胀图像文件大小

1 个答案: