Ширина изображения Высота через AngularJS (ng-file-upload)

Question

Мне нужно проверить ширину изображения - высоту на основе соотношения 1:3. Я использую ng-file-upload для загрузки изображения. Проверка должна быть сделана перед отправкой на сервер.

Я не знаю, как получить ширину / высоту изображения из выбранного изображения. Кто-нибудь может мне помочь?

Я следую учебному пособию с этого сайта: http://odetocode.com/blogs/scott/archive/2013/07/03/building-a-filereader-service-for-angularjs-the-service.aspx

Answer 1

Это будет запрос функции для плагина. В качестве обходного пути вы можете сделать это:

<div ngf-select ngf-model="image" ngf-validate-fn-async="validateRatio(image)" ngf-pattern="'image/*'" accept="image/*" >

$scope.validateRatio = function(image) {
  var defer = $q.defer();
  Upload.imageDimensions(image).then(function(d) {
    if (d.width / d.height === expectedRatio) {
      defer.resolve()
    } else {
      defer.reject();
    }
  }, function() {defer.reject();});
  return defer.promise;
}

или же

<div ngf-select ngf-model="image" ngf-pattern="'image/*'" ngf-min-height="0" accept="image/*" >
<div ng-show="image.width && (image.width / image.height !== expectedRatio)">Invalid ratio?

РЕДАКТИРОВАТЬ Функция добавлена ​​Вы можете иметь

<div ngf-select ngf-model="image" ngf-ratio="1x3" ngf-pattern="'image/*'" accept="image/*" > 

Answer 2

Когда вы загрузили файл, назначаете ли вы элемент DOM с идентификатором? Если это так, простой JS может работать, например:

var img = document.getElementById('imageid'); 

var width = img.clientWidth;
var height = img.clientHeight;

Answer 3

    var image = angular.element('<CLASS_NAME or ID_NAME>');
    $scope.width = image.width();
    $scope.height = image.height();

Надеюсь, это поможет Вам!