2016-08-02 21 views
0

で画像のサイズを取得:画像のアップロード、私は角度-jsファイルにローカルの画像を「アップロード」にディレクティブを以下しているディレクティブ

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以下(値))のようなものを試みた:

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

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

をしかし、それは動作しませんでした。私もimg.onloadで試しましたが、結果も得られませんでした。

イメージディメンションはどのように取得できますか?

ありがとうございます!

答えて

0

は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]); 
        } 
       }); 
      }); 
     } 
    }; 
}]); 
関連する問題