неправильная ширина img тега

Question

Я пытаюсь создать загрузчик изображений для своего приложения. Поэтому мне нужно изменить размеры изображений. Но часто я получил значение ложной ширины в теге img. Не каждый раз. Но иногда, когда я загружаю картинку 3 раза или иногда, если меняю изображение, тогда есть старая ширина дюйма Но также не каждый раз.

$(document).on('pageshow', '#profil', function() { 
    $('#content').height(getRealContentHeight()); 

    var max_height = getRealContentHeight(); 
    var max_width = $(window).width(); 

    var username = getUrlParameter('user'); 
    var data; 
    var x, y, w, h; 
    var preview; 
    var reader; 
    var pic = document.getElementById('pic'); 


    var jcrop_api; 
    $('#upload').bind("change", function() { 
     preview = new Image(); 
     var file = document.querySelector('input[type=file]').files[0]; 
     reader = new FileReader(); 
     reader.onloadend = function() { 
      if (jcrop_api) { 
       jcrop_api.setImage(reader.result); 
      } 

      preview.src = reader.result; 

      document.getElementById('pic').src = preview.src; 

      alert(pic.height); //there is the false value...sometimes.... 
      alert(pic.width); 
      var size = calculateAspectRatioFit(pic.width, pic.height, max_width, max_height); 
      alert("heigth:" + size.height); 
      alert("width:" + size.width); 
//   document.getElementById('pic').height = size.height; 
//   document.getElementById('pic').width = size.width; 
      jQuery(function ($) { 
       $('#pic').Jcrop({ 
        aspectRatio: 1, 
        minSize: [50, 50], 
        maxSize: [300, 300], 
        onChange: showCoords, 
        onSelect: showCoords 
       }, function() { 
        jcrop_api = this; 
       }); 
      }); 
      function showCoords(c) { 
       x = c.x; 
       y = c.y; 
       w = c.w; 
       h = c.h; 
      }; 
      function calculateAspectRatioFit(srcWidth, srcHeight, maxWidth, maxHeight) { 

       var ratio = Math.min(maxWidth/srcWidth, maxHeight/srcHeight); 

       return {width: srcWidth * ratio, height: srcHeight * ratio}; 
      } 

     }; 
     if (file) { 
      reader.readAsDataURL(file); 
     } else { 
      preview.src = ""; 
     } 
    }); 
    $('#continue').bind("click", function() { 
     //ajax upload 
    }); 
}); 

Answer 1

Может быть один из двух вопросов:

1) настраиваете вы свой «» #pic высоту элемента или ширины в CSS или инлайн? Вы можете получать размеры элемента, а не изображения.

2) Вы устанавливаете 'src' на этом img, но не дожидаетесь загрузки изображения. Вы можете попробовать:

$("#pic").on("load", function() { 
    //get dimensions now 
}); 

У вас есть много изображений? В противном случае вы можете загрузить его в JS с помощью:

var img = new Image(); 

Затем с помощью обработчика событий загрузки JQuery на это, как указано выше. Затем установите:

img.src = 'image url'; 

Answer 2

Вы можете попробовать следующее:

$("#pic").height(); 
$("#pic").width(); 
$("#pic").outerHeight(); 
$("#pic").outerWidth(); 

Вместо:

pic.height 
pic.width 

И увидеть правильный тот, который подходит?