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