What could be the reason for seeing an enlarged image in AngularJS?

I've encountered an issue with my image viewer in AngularJS. While I have successfully implemented the viewer, all I see is a zoomed-in version of the image instead of the actual one. Can anyone help me figure out why?

Here is the code I am using: http://plnkr.co/edit/eemTIHAON9T6nXf31D8C?p=preview

This is the output I'm getting (Zoomed image)

https://i.sstatic.net/6TJH0.png

What I'm expecting is the full image without it being zoomed in

https://i.sstatic.net/niNmy.png

Here's a snippet of the controller code:

 app.controller('MainCtrl', function($scope, $timeout) { 
  $scope.ca='https://evportal.airtel.com/sharedimages/Postpaid/93c4e50b-10a7-4717-b976-592b74bc2d371541256937292_poa_front_image.jpeg'
})
javascriptangularjs

Answer №1

When calling the resetImage() function in app.js, there is a specific step that needs attention. Setting the currentScale to 1 may result in the image being drawn with a 1:1 scale on the canvas which is not ideal. This approach causes larger images to appear zoomed in and smaller images to appear zoomed out based on their own width/height.

A better way to handle this situation is by initializing a scale that considers the width/height of the input source so that the entire picture will fit perfectly on the canvas. One effective method to achieve this is as follows:

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

Answer №2

In order to adjust the scale parameter for the image, you should refer to the provided plunker link and take a look at line number 92 in the app.js file. Instead of currentScale = 1;, make sure to use 

currentScale = 0.1;
.

By making this adjustment, your image will display as expected.

To view an example of this solution in action, click on the link below.

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Encountering an issue while attempting to test geolocation functionality in the web browser

I've been working on integrating the geolocation API into my app and came across a suitable resource at the MDN website. However, when I attempted to test for the existence of the geolocation object in the browser, I encountered this error: Server Err ...

javascriptreactjsgeolocationnext.js

Ways to display payment confirmation without refreshing the current page

I am struggling with my custom stripe payment form. The payment is processed successfully, but the page reloads before displaying the success message. I want to implement jQuery ajax to prevent the page from reloading, but my current method is not working ...

javascriptphpjqueryajax

Particles are not appearing when using the Three.js shader material

Hey there, I've been working on a simple scene with a grid of particles in the shape of a cube. Check it out here: https://codepen.io/sungaila/pen/qqVXKM The issue I'm facing is that when using a ShaderMaterial, the particles don't seem to ...

javascriptthree.jsshader

Interactive web page with dynamic JQuery functionality and navigable page links

I am working on the project/index.html page <html> <head> <title>Index</title> <scripts...> </head> <body> Hello <div id="content"></div> <button id="page1" value="page1"/> <but ...

javascriptphpjquerydynamicindexing

I'm having trouble sending registration emails through my server. What could be causing this issue?

Currently, I am in the process of developing a registration system that automatically sends an email with the user's username and password once they have successfully registered. The registration process functions smoothly up until the point where the ...

javascriptnode.jsnodemailer

Include the <script> tag in the HTML code for an iframe without running it

Currently, I am working on an HTML code that involves memory for an Iframe. Interestingly, whenever I use the append function, it not only executes the code but also carries out its intended task. html = $(parser.parseFromString($("#EHtml").val(), "text/h ...

javascriptjqueryhtmliframe

how can I include an AngularJS variable as a parameter in an onclick function?

I attempted to utilize an AngularJS variable as an argument value inside onclick() in order to invoke a JavaScript function. Can someone provide me with instructions on how to achieve this? Here is my code: <div onclick="deleteArrival({{filterList.id} ...

javascriptangularjsangularjs-ng-repeat

Getting the string value from query parameters can be achieved by accessing the parameters and

Currently, I am attempting to retrieve the string value stored within a class-based object variable named question5. The way I am trying to access this variable on the front-end is shown below. axios.get("http://localhost:3001/users/questionaire/?getq ...

javascriptreactjsexpressmongooseaxios

Updating an element's HTML content from a template URL using AngularJS

Can someone help me figure out how to set the html of an element in my directive based on a dynamic template url? element.html('some url to a template html file'); rather than using element.html('<div>test</div>').show() ...

javascriptangularjsangularjs-directive

Utilize focusout and onclick events on multiple components at the same time

Currently, I am in the process of coding an Autocomplete feature from scratch in Vue, but I am encountering a challenge when it comes to selecting an option from the dropdown menu. I have set it up so that the dropdown is shown when the input is clicked ...

javascripthtmlvue.js

Ways to verify if a user is authenticated without relying on request.session

I am currently developing a web application using Express, Docker, and following a Three-layered architecture. In my app, I store user login information in a session and have blogposts as a key resource. To retrieve the blogpostId from the database in the ...

javascriptexpresssession

How to include a javascript file in a different file and compile it using Node.js

For running my practice JS files, I rely on Node. As an example, I use node bts.js. In order to implement a queue, I decided to install Collections by using the command npm install collections --save. You can also see this reflected in the hierarchy shown ...

javascriptnode.js

Instructions on how to insert a new row into Datatables following the successful submission of a form via AJAX请求

Could someone please provide guidance on how to insert a new row into an existing datatable after a successful AJAX request? Here is the code I am currently using: $(document).ready(()=>{ $.ajax({ url: 'http://localhost:3000/api/post/getUserDat ...

javascriptjqueryajaxdatatables

Duplicating an Angular 2 reactive form without retaining the original reference

I am facing a challenge with my reactive form where I need to round certain values when the form is submitted, without altering their appearance on the page. To achieve this, I devised a method that generates a new form, rounds the specified values, and t ...

javascriptangularforms

Error while retrieving reference from mongoDB in NodeJS

I am currently working on a small website that needs to query my local mongodb. Everything works perfectly fine on localhost. That's why I decided to begin with NodeJS. While all JavaScript functions work seamlessly when run separately, I encounter a ...

javascripthtmlnode.jsmongodb

Node is throwing a 302 error on Localhost:3000

Looking for some guidance as a beginner trying to create and run a nodejs application. Encountering an error while running server.js via nodemon, the console displays the following: Express server listening on port 3000 Mongoose default connection open t ...

javascriptnode.jsmongodbexpress

Is there a way to work around the CORS policy in order to fetch data from URLs?

I have been developing a tool that can analyze URLs from an uploaded CSV file, search the text content of each URL, and calculate the total word count as well as the occurrences of "saas" or "software". The goal is to generate a new CSV file with the origi ...

javascripthtmlcsscsvcors

It's time to wrap up the session with some old "cookies" and a closing function

Would like the message to only display once after clicking the "Cookies" button. Once the user accepts cookies, they should be stored on their device for a set period of time. Your assistance is greatly appreciated. :) Below is the html and js code: $(do ...

javascriptcookies

Creating a Node.js asynchronous setup function

I'm in the process of transitioning from Nodejs v12 to v14 and I've noticed that v14 no longer waits for the setup function to resolve. My setup involves Nodejs combined with Express. Here's a simplified version of my code: setup().then(cont ...

javascriptnode.jstypescriptexpress

ReactJS aligns buttons to the right

I have been attempting to align a button to the far right without success. Here is what I have tried: <Button variant="contained" style={{display: 'flex', justifyContent: 'right'}} color="primary" className="float-right" onClick={ ...

javascripthtmlcssreactjs