angularjs – 以angular.js的实际大小显示图像

发布时间：2020-12-17 17:47:45 所属栏目：安全来源：网络整理

导读：我需要以实际尺寸显示图像,即使它比容器大.我尝试了使用 Image变量和 capturing the size on load这样的技巧： HTML： div ng-controller="MyCtrl" input ng-model="imageurl" type="url" / button ng-click="loadimage()" type="button"Load Image/button i

我需要以实际尺寸显示图像,即使它比容器大.我尝试了使用 Image变量和 capturing the size on load这样的技巧：

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

此脚本有效,但只有在图像很大的情况下多次单击按钮后才能使用.

我该怎么做才能让它一键完成？

有没有比这更好的方法来发现图像大小？

解决方法

您需要使用 $scope.$apply,否则将无法正确处理在非Angular事件处理程序中对$scope进行的任何更改：

img.onload = function () {
  $scope.$apply(function() {
    $scope.image.width = img.width;
    $scope.image.height = img.height;
    $scope.image.path = $scope.imageurl;
  });
}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!