Показать изображение в его реальном размере в angular.js
Мне нужно отобразить изображение в его реальном размере, даже если оно больше, чем его контейнер. Я попробовал хитрость использования переменной изображения изахватить размер под нагрузкой с чем-то вроде этого:
HTML:
<div ng-controller="MyCtrl">
<input ng-model="imageurl" type="url" />
<button ng-click="loadimage()" type="button">Load Image</button>
<img ng-src="{{image.path}}"
style="width: {{image.width}}px; height: {{image.height}}px" />
</div>
Javascript:
.controller("MyCtrl", ["$scope", function ($scope) {
$scope.image = {
path: "",
width: 0,
height: 0
}
$scope.loadimage = function () {
var img = new Image();
img.onload = function () {
$scope.image.width = img.width;
$scope.image.height = img.height;
$scope.image.path = $scope.imageurl;
}
img.src = $scope.imageurl;
}
}]);
Этот скрипт работает, но только после нажатия кнопки несколько раз, если изображение большое.
Что я должен сделать, чтобы это работало в один клик?
Есть ли лучший способ узнать размер изображения, чем этот?