在 angular.js 中以实际大小显示图像

Question

我需要以实际大小显示图像，即使它比容器大。我尝试了使用 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;
    }
}]);

此脚本有效，但如果图像很大，则仅在多次单击按钮后才有效。

我应该怎么做才能让它一键运行？

还有比这更好的发现图像大小的方法吗？

Answer 1

这对我有用（使用 twitter 引导程序）：

mainfile.js 文件（在 products 数组中）：

{
  name: 'Custom Products',
  size: {width: 15, height: 15},      
  images:{thumbnail:"img/custom_products/full_custom_3.jpg"}
}

index.html 文件：

      <div class="gallery">
        <div class="img-wrap">
            <ul class="clearfix">
                <li class="small-image pull-left thumbnail">
                    <img ng-src="{{product.images.thumbnail}}" style="height:{{product.size.height}}em; width: {{product.size.width}}em" />
                </li>
          </ul>
        </div>
      </div>

Answer 2

根据指令“模式”重新构建整个事物可能还为时不晚。我对类似问题 (link) 的解决方案获得了几票赞成，这让我认为这是传统方法。看看：

HTML:
    <div ng-controller="MyCtrl">
        <input ng-model="image.tmp_path" type="url" />
        <button ng-click="loadimage()" type="button">Load Image</button>
        <img ng-src="{{image.path}}" preloadable />
    </div>

CSS:
    img[preloadable].empty{
        width:0; height:0;
    }

    img[preloadable]{
        width:auto; height:auto;
    }

JS:
    // Very "thin" controller:
    app.controller('MyCtrl', function($scope) {
       $scope.loadimage = function () {
            $scope.image.path = $scope.image.tmp_path;
       }
    });

    // View's logic placed in directive 
    app.directive('preloadable', function () {        
       return {
          link: function(scope, element) {
             element.addClass("empty");
             element.bind("load" , function(e){
                element.removeClass("empty");
             });
          }
       }
    });

工作小插曲：http://plnkr.co/edit/HX0bWz?p=preview

Answer 3

您需要使用$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;
  });
}