Uzyskiwanie szerokości i wysokości obrazu za pomocą filereadera

Question

Buduję rozmiar obrazu/przycinanie, a chciałbym wyświetlić podgląd na żywo po ich edycji w trybie modalnym (ładowanie początkowe). Myślę, że ten powinien działać, ale po prostu dostaję 0 w console.log. To wymaga karmienia szerokość i wysokość obrazu oryginalnego do innego skryptu (co zrobię potem wystarczy je console.log/zmienną na razie)

function doProfilePictureChangeEdit(e) { 
    var files = document.getElementById('fileupload').files[0]; 
    var reader = new FileReader(); 
    reader.onload = (function(theFile) { 
     document.getElementById('imgresizepreview').src = theFile.target.result; 

     document.getElementById('profilepicturepreview').src = theFile.target.result; 
     } 
    ); 
    reader.readAsDataURL(files); 
    var imagepreview = document.getElementById('imgresizepreview'); 
    console.log(imagepreview.offsetWidth); 
    $('img#imgresizepreview').imgAreaSelect({ 
     handles: true, 
     enable: true, 
     aspectRatio: "1:1", 
     onSelectEnd: preview 
    }); 
    $('#resizeprofilepicturemodal').modal('show'); 
    }; 

Answer 1

Trzeba czekać na obrazie załadować. Spróbuj obsłużyć element wewnątrz .onload.

Uprościliśmy także proces ustawiania źródła dwóch elementów na sposób, w jaki powinno się to robić (z jQuery).

reader.onload = (function(theFile) { 
    var image = new Image(); 
    image.src = theFile.target.result; 

    image.onload = function() { 
     // access image size here 
     console.log(this.width); 

     $('#imgresizepreview, #profilepicturepreview').attr('src', this.src); 
    }; 
}); 

Answer 2

Dla mnie rozwiązanie Austin nie działa, więc przedstawiam jeden pracował dla mnie:

var reader = new FileReader; 

reader.onload = function() { 
    var image = new Image(); 

    image.src = reader.result; 

    image.onload = function() { 
     alert(image.width); 
    }; 

}; 

reader.readAsDataURL(this.files[0]); 

A jeśli okaże się, że zadanie image.src = reader.result; następuje po image.onload nieco przewodowej , Ja też tak myślę.

Answer 3

w ten sposób mam dla angularjs

  fileReader.readAsDataUrl($scope.file, $scope).then(function(result) { 
 
       var image = new Image(); 
 
       image.src = result; 
 
       image.onload = function() { 
 
        console.log(this.width); 
 
       }; 
 
       $scope.imageSrc = result; //all I wanted was to find the width and height 
 

 

 
      });