how to resize the image in angularjs?

Question

<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>

I am showing the image using data URLs, but how can I get the current height and width in pixel to resize it proportionally in angular js?

I have some algorithm to resize it independently

you don't need angularjs to do that: http://stackoverflow.com/questions/3380252/how-to-create-proportional-image-height-width — mvermand, Mar 02 '17 at 12:43
If you just set width or height the image should be resized proportional — winner_joiner, Mar 02 '17 at 12:44
I have some algorithm to resize it independently. I want to trigger that function — Jackson Baby, Mar 02 '17 at 12:47

score 1 · Answer 1 · answered Mar 02 '17 at 12:46

1

I'm not sure what data imageDataUrl has in it but you can get the image dimensions in JavaScript easily:

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

answered Mar 02 '17 at 12:46

Nathan Hensher

329
3
8

1

but I'm using FileReader(); – Jackson Baby Mar 02 '17 at 12:49
Will this help? - http://stackoverflow.com/questions/15491193/getting-width-height-of-an-image-with-filereader – Nathan Hensher Mar 02 '17 at 12:52

score 1 · Answer 2 · answered Mar 02 '17 at 12:49

as pointed by mvermand comment, you can just add CSS to your class or directly height/width attributes.

<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>

If using only height or width, the other attribute is calculated to respect the image proportions.

Now, regarding the size you want, you can also use percents - like width="100%" to use the full width.

Cheers

score 0 · Answer 3 · answered Mar 02 '17 at 12:46

If your goal is to resize proportionally, why not resize using CSS percentages?

CSS:

.smaller {
  width: 80%;
}

Your Code:

<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>

score 0 · Answer 4 · answered Mar 02 '17 at 12:50

0

you can get/set the height and width properties with angular.element("selector").height or width.

answered Mar 02 '17 at 12:50

eyurdakul

894
2
12
29

I want to trigger a function on ng-repeat with the current element – Jackson Baby Mar 02 '17 at 12:53
add your function in the ng-init attribute and give the data object as parameter. if you really need the element itself (not only source) compile it in your controller with angular $compile. and so on. – eyurdakul Mar 02 '17 at 13:00

how to resize the image in angularjs?

4 Answers4