Загрузка изображения, получить размеры изображения в директиве

Question

Загрузка изображения, получить размеры изображения в директиве

0

У меня есть следующая директива angular-js для 'upload' local Images:

app.directive('ngFileModel', ['$parse', function ($parse) {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            var model = $parse(attrs.ngFileModel);
            var isMultiple = attrs.multiple;
            var modelSetter = model.assign;
            element.bind('change', function () {
                var values = [];
                angular.forEach(element[0].files, function (item) {
                    var value = {
                       // File Name 
                        name: item.name,
                        //File Size 
                        size: item.size,
                        //File URL to view 
                        url: (URL || webkitURL).createObjectURL(item),
                        // File Input Value 
                        _file: item
                    };
                    values.push(value);


                });
                scope.$apply(function () {
                    if (isMultiple) {
                        modelSetter(scope, values);
                    } else {
                        modelSetter(scope, values[0]);
                    }
                });
            });
        }
    };
}]);

Теперь я хочу получить размеры изображения, но я не знаю, как это сделать. Я пробовал что-то вроде этого (ниже строки values.push(value)):

var img = new Image();
img.src = value.url;

alert("Width: " + img.width);

но это не сработало. Я также пробовал с img.onload, но я тоже не получил результата.

Как я могу получить размеры изображения?

Благодарю!

Draz 02 авг. 2016, в 11:47

Источник

Теги:

angularjs

1 ответ

Ещё вопросы

Draz · Answer 1 · 2016-08-02T13-11-00.000Z

Решив его самостоятельно, image.onload был правильным путем:

app.directive('ngFileModel', ['$parse', function ($parse) {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            var model = $parse(attrs.ngFileModel);
            var isMultiple = attrs.multiple;
            var modelSetter = model.assign;
            element.bind('change', function () {
                var values = [];
                angular.forEach(element[0].files, function (item) {

                    var img = new Image();  
                    var imgheight = 0;
                    var imgwidth = 0;
                    var imgurl = (URL || webkitURL).createObjectURL(item);

                    img.src = imgurl;
                    img.onload = function() {

                        imgheight = img.height;
                        imgwidth = img.width;
                        //alert("Width: " + imgheight + "  height: " + imgwidth);

                        var value = {
                       // File Name 
                        name: item.name,
                        //File Size 
                        size: item.size,
                        //File URL to view 
                        url: imgurl,
                        // File Input Value 
                        _file: item,

                        width: imgwidth,

                        height: imgheight,

                        mystyle: {}
                        };
                        scope.$apply(function () {
                            values.push(value);
                        });                     
                    };
                });
                scope.$apply(function () {
                    if (isMultiple) {
                        modelSetter(scope, values);
                    } else {
                        modelSetter(scope, values[0]);
                    }
                });
            });
        }
    };
}]);