Not able to change height and width of image using javascript

Question

Hey I am trying to change the height and width of image which I read from the input and trying to display it back, this the code:

function readanddisplayImage(input){
  if(input.files && input.files[0]){         
     var filereader = new FileReader(); 
     filereader.readAsDataURL(input.files[0]);         
     filereader.onload = function(reader){
            var image = new Image();
            image.src = reader.target.result;     
            image.width = 150;
            image.height = 150;       
            //It works fine till this line but in the next line image is displayed without the size changed. 
            $("#profilePicture").css("background-image", "url('" + image.src + "')");             
            alert(image.width +"  "+ image.height);
     }
  }    
}

Can someone please tell me where I am going wrong?? ThankYou.

try to replace image.width with image.style.width and replace image.height with image.style.height — Amr Magdy
– Amr Magdy, Commented Sep 24, 2016 at 6:48
@MdMusfekurRahman - that doesn't effect the image when used as a css background either — Jaromanda X
– Jaromanda X, Commented Sep 24, 2016 at 6:56

Jaromanda X · Accepted Answer · 2016-09-24 06:54:26Z

3

changing the image width and height like that wont effect the image when used as a CSS background ... try changing the backgound image dimensions using CSS

 filereader.onload = function(reader){
        $("#profilePicture").css("background-image", "url('" + reader.target.result + "')").css("background-size", "150px 150px");

 }

answered Sep 24, 2016 at 6:54

Jaromanda X

57.1k6 gold badges82 silver badges96 bronze badges

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

1 Comment

KeyStroke Over a year ago

Thanks a lot really hekpfull

cstr_ · Accepted Answer · 2016-09-24 07:01:33Z

0

A background image's size is managed by the CSS property background-size - for example, set it to 150px 150px for the desired effect.

answered Sep 24, 2016 at 7:01

cstr_

986 bronze badges

Collectives™ on Stack Overflow

Not able to change height and width of image using javascript

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related