Question

我需要获取图像原始宽度，我将改变src属性，这样：

<input hidden type="file" id="loader" accept="image/*">

$('#m1new').click(function(){
    $('#loader').click();
});

$('#loader').change(function(){
var a = this.files[0];
var reader = new FileReader();
reader.onload = function(e) {
    var src = e.target.result;
    $('#imgt').attr("src", src);
    }
reader.readAsDataURL(a);
var a = $('#imgt').width();
console.log(a);
});

控制台说 - undefined。

Answer 1

试试这个：

$('#loader').change(function(){
    var a = this.files[0];
    var reader = new FileReader();
     reader.onload = function(e) {

     var img = new Image();        
     img.onload = function() {
        console.log('width is: '+ img.width);             
     }; 
     img.src = reader.result; 
     }
   reader.readAsDataURL(a);       
});

Answer 2

控制台说 - 未定义。

在设置console.log之后，以及在onload事件发生之后，src {<1}}内的<{em>

load

你在评论中说过：

这给了我计算宽度 - 960px - 而不是原始宽度 - 540px - 在这种情况下。

这样做的唯一原因是你是否将CSS应用于元素。如果你这样做，你没有在你的问题中提到它。（那是一种重要的信息。）

您可以从不在DOM中的$('#loader').change(function() { var a = this.files[0]; var reader = new FileReader(); reader.onload = function(e) { var src = e.target.result; $('#imgt').on("load", function() { // Hook `load` first var a = $(this).width(); // Get the width once loaded console.log(a); }).attr("src", src); // Set src AFTER hooking `load` } reader.readAsDataURL(a); });元素获取原始宽度（因此不受CSS限制）：

img

如何获得图像原始宽度

2 个答案: