Изменение высоты и ширины Javascript не изменяется. Изображение SRC

Question

Хорошо, вот что я хочу сделать. Я хочу, чтобы пользователь загрузил фотографию в dom и изменил ее размер на стороне клиента. Мне нужно изменить ширину изображения, прежде чем я покажу изображение, чтобы пользователь мог взаимодействовать с ним через $ .imgAreaSelect. Тогда я собираюсь делать другие вещи.

Но часть, которую я не получаю, является частью «image.width =». Когда я устанавливаю src в img, после того, как я установил размер, изображение останется того же размера.

var readImage = function(file){ 

    var reader = new FileReader(); 
    var image = new Image(); 

    reader.readAsDataURL(file); 
    reader.onload = function(_file) { 

     image.src = _file.target.result; 
     image.onload = function() { 

      this.width = 1200; 

      $('img#photo').attr('src',this.src); 

     }; 
    }; 
}; 

Вот пример: http://patomation.com/dev/imagesizer2/

Идите вперед и перетащить фотографию в рот, и вы увидите, что я имею в виду. Результат должен быть увеличенным.

Answer 1

вы меняете ширину ссылки на изображение, созданную на изображении var, а не элемент img в html. Вот причина, по которой IMG в HTML doent изменить его ширина

вы должны сделать, это я думаю

$('img#photo').attr('width',this.width); 
$('img#photo').attr('src',this.src);