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: stackoverflow.com/questions/3380252/… — mvermand
– mvermand, Commented Mar 2, 2017 at 12:43
If you just set width or height the image should be resized proportional — winner_joiner
– winner_joiner, Commented Mar 2, 2017 at 12:44
I have some algorithm to resize it independently. I want to trigger that function — Jackson Baby
– Jackson Baby, Commented Mar 2, 2017 at 12:47

Nathan Hensher · Accepted Answer · 2017-03-02 12:46:57Z

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 2, 2017 at 12:46

Nathan Hensher

3363 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Jackson Baby Over a year ago

but I'm using FileReader();

Nathan Hensher Over a year ago

Will this help? - stackoverflow.com/questions/15491193/…

Kineolyan · Accepted Answer · 2017-03-02 12:49:04Z

1

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

answered Mar 2, 2017 at 12:49

Kineolyan

7439 silver badges25 bronze badges

Comments

aaa · Accepted Answer · 2017-03-02 12:46:30Z

0

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>

answered Mar 2, 2017 at 12:46

aaa

6016 silver badges13 bronze badges

Comments

eyurdakul · Accepted Answer · 2017-03-02 12:50:56Z

0

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

answered Mar 2, 2017 at 12:50

eyurdakul

9122 gold badges12 silver badges29 bronze badges

2 Comments

Jackson Baby Over a year ago

I want to trigger a function on ng-repeat with the current element

eyurdakul Over a year ago

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.

Collectives™ on Stack Overflow

how to resize the image in angularjs?

4 Answers 4

2 Comments

Comments

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related