Реализация jpeg-изображения с размером javascript с фиксированным размером

Question

Вот наша реализация изменения размера jpeg на стороне клиента до фиксированного размера 1024 или 768. Сценарий работы заключается в том, что пользователь выбирает изображение (исходное изображение) она хочет загрузить (без отображения). Если размер исходного изображения больше 1024 или 768, измените размер изображения пропорционально. Приведенный ниже код вычисляет ширину и высоту должно быть и выполняет изменение размера.

Есть 2 alert(), чтобы показать размер изображения до и после изменения размера. Мы обнаружили, что размер файла не уменьшается. Что может быть неправильным с кодом?

$(function(){ 
    $('#uploaded_file_file_for_upload').change(function(){ 
     var _URL = window.URL || window.webkitURL; 
     var img, img_width = 0, img_height = 0, max_width = 1024, max_height = 768; 
     var f = $(this)[0].files[0]; 
     alert(f.size); 
     if (f.type == 'image/jpeg' || f.type == 'image/jpg') { 
      img = new Image(); 
      img.onload = function() { 
       img_width = this.width; 
       img_height = this.height; 
      }; 
      img.src = _URL.createObjectURL(f); 
      if (img_width > max_width){ 
       img_height = Math.ceil(img_height * max_width/img_width); 
       img_width = max_width; 
      } else if (img_height > max_height) { 
       img_width = Math.ceil(img_width * max_height/img_height); 
       img_height = max_height; 
      }; 
      resize(img, img_width, img_height); 
      var f1 = $(this)[0].files[0]; 
      alert(f1.size); 
     }; 

     function resize(image, width, height) { 
      var mainCanvas = document.createElement("canvas"); 
      mainCanvas.width = width; 
      mainCanvas.height = height; 
      var ctx = mainCanvas.getContext("2d"); 
      ctx.drawImage(image, 0, 0, width, height); 
      $('#uploaded_file_file_for_upload').attr('src', mainCanvas.toDataURL("image/jpeg")); 
     }; 

     return false; 

    }); 
}); 

Answer 1

Проверьте naturalWidth из образа вместо CSS width