图像宽度高度通过 AngularJS (ng-file-upload)
Image Width Height Via AngularJS (ng-file-upload)
我需要根据 1:3 比率验证图像宽度 - 高度。我正在使用 ng-file-upload 上传图片。在将其发送到服务器之前需要完成验证。
我不知道如何从所选图像中获取图像 width/height。有人可以帮我吗?
我正在关注此站点的教程:
http://odetocode.com/blogs/scott/archive/2013/07/03/building-a-filereader-service-for-angularjs-the-service.aspx
上传文件后,是否为 DOM 元素分配了 ID?如果是这样,纯 JS 可以工作,例如:
var img = document.getElementById('imageid');
var width = img.clientWidth;
var height = img.clientHeight;
这将是插件的功能请求。
作为解决方法,您可以这样做:
<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/*" >
var image = angular.element('<CLASS_NAME or ID_NAME>');
$scope.width = image.width();
$scope.height = image.height();
希望对您有所帮助!
我需要根据 1:3 比率验证图像宽度 - 高度。我正在使用 ng-file-upload 上传图片。在将其发送到服务器之前需要完成验证。
我不知道如何从所选图像中获取图像 width/height。有人可以帮我吗?
我正在关注此站点的教程: http://odetocode.com/blogs/scott/archive/2013/07/03/building-a-filereader-service-for-angularjs-the-service.aspx
上传文件后,是否为 DOM 元素分配了 ID?如果是这样,纯 JS 可以工作,例如:
var img = document.getElementById('imageid');
var width = img.clientWidth;
var height = img.clientHeight;
这将是插件的功能请求。 作为解决方法,您可以这样做:
<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/*" >
var image = angular.element('<CLASS_NAME or ID_NAME>');
$scope.width = image.width();
$scope.height = image.height();
希望对您有所帮助!