如何获取图像原始宽度

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在设置src之后，以及图像上的load事件之后，CC_3应该是内部。

$('#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);
});

---

在评论中您说：

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

这样做的唯一原因是，如果您将CSS应用于元素。如果这样做，您就不会在问题中提及它。（那是一种重要信息。）

您可以从不在DOM中的img元素获得原始宽度（因此不受CSS的约束）：

$('#loader').change(function() {
    var a = this.files[0];
    var reader = new FileReader();
    reader.onload = function(e) {
        var src = e.target.result;
        var img = $("<img>");
        img.on("load", function() {     // Hook `load` first
            var a = $(this).width();    // Get the width once loaded
            console.log(a);
            $("#imgt")[0].src = src;    // Now set it on the image in the DOM
        }).attr("src", src);            // Set src AFTER hooking `load`
    }
    reader.readAsDataURL(a);
});