Hochladen von Bildern, erwerben Bildabmessungen in Richtlinie

Question

Ich habe folgende Winkel js Richtlinie lokale Bilder zu ‚laden‘:

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]); 
        } 
       }); 
      }); 
     } 
    }; 
}]); 

ich jetzt die Bild-Dimensionen erwerben will, aber ich weiß nicht, wie. Ich habe versucht, so etwas wie die (unter der Leitung values.push (Wert)):

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

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

aber das hat nicht funktioniert. Ich habe es auch mit img.onload versucht, aber ich habe auch kein Ergebnis bekommen.

Wie kann ich die Bildmaße erfassen?

Danke!

Answer 1

es von mir gelöst, war image.onload der richtige Weg zu gehen:

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]); 
        } 
       }); 
      }); 
     } 
    }; 
}]);