CODEWITHSUNDEEP
javascriptangularjs
user944513
user944513

Reputation: 12729

why I am getting zoomed image in angularjs?

I am using image viewer in angular js .I am successfully implement the image viewer .I didn't get actual image but get zoomed image why ?

here is my code http://plnkr.co/edit/eemTIHAON9T6nXf31D8C?p=preview

Getting This output (Zoomed image)

enter image description here

Expecting full image without zoomed

enter image description here

app.controller('MainCtrl', function($scope, $timeout) {

 $scope.ca='https://evportal.airtel.com/sharedimages/Postpaid/93c4e50b-10a7-4717-b976-592b74bc2d371541256937292_poa_front_image.jpeg'

})

Upvotes: 1

Views: 520

Answers (2)

developerKumar
developerKumar

Reputation: 1796

You need to change the scale parameter for image. According to the give plunker link, in app.js file see line no. 92 , You need to replace currentScale = 1; by

currentScale = 0.1;

This will render your image as you expected.

To see the working example follow the link below.

http://plnkr.co/edit/Q7bvAr?p=preview

Upvotes: 0

ToTheMax
ToTheMax

Reputation: 1031

In the resetImage() function in app.js you set the currentScale to 1. The image will then be drawn with a 1:1 scale on the canvas. You don't want this, because this way the image will be drawn depending on it's own width/height on the canvas. Big pictures will appear zoomed in, and small pictures will appear zoomed out.

Instead you want initialize a scale depending on the width/height of the input source so the entire picture will be drawn on the canvas. A neat way to do this is like this:

currentScale = Math.min(canvas.width/image.width, canvas.height/image.height);

Upvotes: 2

Related Questions