KeyStroke KeyStroke - 2 months ago 6
CSS Question

Not able to change height and width of image using javascript

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.

Answer

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");

 }