Изменение ширины файла изображения javascript

Question

Если пользователь выбирает изображение, я просматриваю его в div как фоновое изображение, у меня есть 2 поля ввода (ширина, высота), поэтому пользователь может определить ширину и высоту загруженного изображения образ.

Я хочу изменить размер изображения предварительного просмотра, если пользователь изменит ширину/высоту.

Но я получаю сообщение об ошибке: Uncaught TypeError: Cannot read property 'width' of undefined

Вот мой код:

HTML - поля ввода

<input type="file" name="sourceImage" id="sourceImage"> 

    <input type="text" class="form-control input-width input-px" maxlength="2" name="width">CM breed 
    <input type="text" class="form-control input-height input-px" maxlength="2" name="height">CM hoog 

Javascript - функции

В этой функции я просмотреть изображение и поместить изображение в изображение var

var image; 

    $(function() { 

     $("#sourceImage").on("change", function() 
     { 
      var files = !!this.files ? this.files : []; 
      if (!files.length || !window.FileReader) return; // no file selected, or no FileReader support 

      if (/^image/.test(files[0].type)){ // only image file 
       var reader = new FileReader(); // instance of the FileReader 
       reader.readAsDataURL(files[0]); // read the local file 

       image = this.result; 

       reader.onloadend = function(){ // set image data as background of div 
        $(".source").css("background-image", "url("+this.result+")"); 
       } 
      } 
     }); 
    }); 

в этой функции я хочу изменить ширину вара изображения, который имеет файл, хранящийся в

 $(function(){ 
     $(".input-px").on("change", function() 
     { 

      image.width($(".input-width").val()); 

     }) 
    }) 

Answer 1

$(function(){ 
    $(".input-px").on("change", function() { 
     var _width = parseInt($(".input-width").val(), 10) || 0; 
     var _height = parseInt($(".input-height").val(), 10) || 0; 
     if(_width > 0) { 
      image.width(_width); 
     } 
     if(_height > 0) { 
      image.width(_height); 
     } 
    }); 
}); 

Edit: Пожалуйста, примите это как расширение для вашего ввода-пикса OnChange функциональности событий.