如何使用angular-file-upload获取图像尺寸

Question

我目前使用的是angular-file-upload指令，并且我使用的几乎是演示中的代码。

我需要在其中添加一个步骤来测试图像的尺寸，目前我只能通过jQuery/javascript执行此操作。

只是想知道是否有一种“角度”的方法来检查图片在上传之前的尺寸？

$scope.uploadImage = function($files) {
    $scope.selectedFiles = [];
    $scope.progress = [];

    if ($scope.upload && $scope.upload.length > 0) {
        for (var i = 0; i < $scope.upload.length; i++) {
            if ($scope.upload[i] !== null) {
                $scope.upload[i].abort();
            }
        }
    }
    $scope.upload = [];
    $scope.uploadResult = [];
    $scope.selectedFiles = $files;
    $scope.dataUrls = [];

    for ( var j = 0; j < $files.length; j++) {
        var $file = $files[j];
        if (/*$scope.fileReaderSupported && */$file.type.indexOf('image') > -1) {
            var fileReader = new FileReader();
            fileReader.readAsDataURL($files[j]);
            var loadFile = function(fileReader, index) {
                fileReader.onload = function(e) {
                    $timeout(function() {
                        $scope.dataUrls[index] = e.target.result;

                        //------Suggestions?-------//
                        $('#image-upload-landscape').on('load', function(){
                            console.log($(this).width());
                        });
                        //-------------------------//
                    });
                };
            }(fileReader, j);
        }
        $scope.progress[j] = -1;
        if ($scope.uploadRightAway) {
            $scope.start(j);
        }

    }
};

Answer 1

我认为你可以这样做：

var reader = new FileReader();
reader.onload = onLoadFile;
reader.readAsDataURL(filtItem._file);

function onLoadFile(event) {
    var img = new Image();
    img.src = event.target.result;
    console.log(img.width, img.height)
}

这是从https://github.com/nervgh/angular-file-upload/blob/master/examples/image-preview/directives.js复制的代码片段。

我认为这是更多的角度。但是，您可能需要对其进行修改以满足您的要求。

Answer 2

试试这段代码

uploader.filters.push({
        name: 'asyncFilter',
        fn: function(item /*{File|FileLikeObject}*/ , options, deferred) {
            setTimeout(deferred.resolve, 1e3);
             var reader = new FileReader();
            reader.onload = onLoadFile;
             reader.readAsDataURL(item);
                function onLoadFile(event) {
                    var img = new Image();
                    img.onload = function(scope) {
                       console.log(img.width,img.height);
                    }
                    img.src = event.target.result;
                }
        }

    });