Невозможно изменить высоту и ширину изображения с помощью JavaScript

Question

Эй, я пытаюсь изменить высоту и ширину изображения, которое я читаю на входе, и пытаюсь отобразить его обратно, этот код:

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

Может кто-нибудь, пожалуйста, скажите мне, где я иду не так?? Благодарю вас.

Answer 1

Изменение ширины и высоты изображения таким образом не повлияет на изображение при использовании в качестве фона CSS... попробуйте изменить размеры фонового изображения с помощью CSS

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

 }

Answer 2

Размер фонового изображения управляется свойством CSS background-size - например, установите его 150px 150px для желаемого эффекта.