jquery - react - Obtener ancho y alto de una imagen con lector de archivos

filereader typescript

Question

Estoy construyendo un tamaño de imagen / recorte, y me gustaría mostrar una vista previa en vivo después de que lo hayan editado en un modal (arranque). Esto debería funcionar, creo, pero acabo de obtener 0 en console.log. Esto requiere alimentar el ancho y la altura de la imagen original en otro script (lo que haré después, solo los necesito en console.log / a variable por ahora)

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

Para mí, la solución de Austin no funcionó, así que presento la que funcionó para mí:

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]);

Y si encuentra esa asignación image.src = reader.result; se lleva a cabo después de la imagen. carga un poco por cable, creo que también.

Answer 2

Tienes que esperar a que se cargue la imagen. Intenta manejar el elemento dentro de .onload .

También simplifiqué el proceso de establecer el origen de los dos elementos sobre cómo debería hacerlo (con 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 3

esta es la forma que tengo para 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


          });