HTML5 arrastra y suelta para cargar imágenes, cómo obtener el tamaño original de la imagen

El proceso de arrastrar y soltar ha terminado. Aquí hablamos principalmente sobre cómo obtener información relacionada con la imagen en la interfaz.

Existe una variable global fileReader en html5, que se utiliza para leer archivos locales, como txt, img, etc. A continuación se muestra un fragmento de código simple. function?checkFile(archivos){

var?file?=?files[0];

var?reader?=?new?FileReader();

//?show significa lt;div?id='show'gt;lt;/divgt;, usado para mostrar la vista previa de la imagen

if(! /image\/\w /.test(file. type)){

show.innerHTML?=?"Asegúrese de que el archivo sea de tipo imagen";

return?false;

}

/?onload es asincrónico

lector.onload?=?function(e){

show.innerHTML?=?' img?src="' e .target .result '"?alt="img"gt;';

}

lector.readAsDataURL(archivo);

}

Esto le permite obtener una vista previa de la imagen sin cargarla en el servidor. Por supuesto, la clave de este problema es conseguir el tamaño original de la imagen. HTML5 también proporciona dos variables para obtener el tamaño original: naturalWidth y naturalHeight, que se utilizan para obtener el ancho y alto originales de la imagen respectivamente.

En el ejemplo anterior, se puede obtener de la siguiente manera: var?width?=?e.target.naturalWidth;

var?height?=?e.target. naturalHeight;

Otra situación es que si ya hay una imagen en la página, ¿cómo obtener el tamaño original? //Obtener la imagen

var?width?=?img.naturalWidth;

var?height?=?img.naturalHeight