如何在angularjs中调整图像大小？答案

【问题标题】：how to resize the image in angularjs?如何在angularjs中调整图像大小？
【发布时间】：2017-07-22 04:51:35
【问题描述】：

<div class="row" data-ng-repeat="row in imageDataUrls" >
    <div class="col-sm-3" data-ng-repeat="imageDataUrl in row" >
        <img alt="img" class="img-responsive"data-ng-src="{{imageDataUrl.url}}" />
    </div>
</div>

我正在使用数据 URL 显示图像，但是如何获取当前像素的高度和宽度以在 Angular js 中按比例调整其大小？

我有一些算法可以独立调整它的大小

【问题讨论】：

你不需要 angularjs 来做到这一点：stackoverflow.com/questions/3380252/…
如果您只是设置宽度或高度，则图像应按比例调整大小
我有一些算法可以独立调整它的大小。我想触发那个功能

标签： javascript angularjs

【解决方案1】：

我不确定 imageDataUrl 中有哪些数据，但您可以轻松地在 JavaScript 中获取图像尺寸：

var img = new Image();
img.onload = function() {
  console.log(this.width + 'x' + this.height);
}
img.src = 'http://lorempixel.com/400/200/';

【讨论】：

但我正在使用 FileReader();
这会有帮助吗？ - stackoverflow.com/questions/15491193/…

【解决方案2】：

正如 mvermand 注释所指出的，您可以将 CSS 添加到您的类或直接添加高度/宽度属性。

<div class="row" data-ng-repeat="row in imageDataUrls" >
    <div class="col-sm-3" data-ng-repeat="imageDataUrl in row" >
        <img alt="img" class="img-responsive" src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e0/SNice.svg/2000px-SNice.svg.png" width="300"/>
    </div>
</div>

如果仅使用高度或宽度，则计算其他属性以尊重图像比例。

现在，关于您想要的尺寸，您还可以使用百分比 - 例如 width="100%" 使用全宽。

干杯

【讨论】：

【解决方案3】：

如果您的目标是按比例调整大小，为什么不使用 CSS 百分比调整大小？

CSS：

.smaller {
  width: 80%;
}

您的代码：

<div class="row" data-ng-repeat="row in imageDataUrls" >
    <div class="col-sm-3" data-ng-repeat="imageDataUrl in row" >
        <img alt="img" class="img-responsive smaller" data-ng-src="{{imageDataUrl.url}}" />
    </div>
</div>

【讨论】：

【解决方案4】：

您可以使用angular.element("selector").height 或width 获取/设置高度和宽度属性。

【讨论】：

我想用当前元素触发 ng-repeat 上的一个函数
在 ng-init 属性中添加你的函数并将数据对象作为参数。如果您真的需要元素本身（不仅是源代码），请使用 angular $compile 在控制器中编译它。等等。