¿Determinar el tamaño del archivo de imagen + dimensiones a través de Javascript?
Como parte de una aplicación web, una vez que las imágenes se han descargado y representado en una página web, necesito determinar el tamaño del archivo de una imagen (kb) y la resolución dentro del contexto del navegador (para poder, por ejemplo, mostrar esa información en la página). Esto debe hacerse en el lado del cliente, obviamente. Debe poder resolverse en el navegador X sin un control ActiveX o un subprograma Java (IE7+, FF3+, Safari 3+, IE6 es bueno tenerlo), aunque no es necesario. ser la misma solución por navegador.
Idealmente, esto se haría usando el sistema Javascript, pero si es absolutamente necesario una biblioteca JQuery o similar (o un pequeño subconjunto de ella), se podría hacer.
Editar :
Para obtener el tamaño de píxel actual en el navegador de un elemento DOM (en su caso, elementos IMG) excluyendo el borde y el margen, puede usar las propiedades clientWidth y clientHeight .
var img = document.getElementById('imageId');
var width = img.clientWidth;
var height = img.clientHeight;
Ahora, para obtener el tamaño del archivo, ahora sólo puedo pensar en la propiedad fileSize que Internet Explorer expone para los elementos del documento y IMG ...
Edición 2: Se me ocurre algo...
Para obtener el tamaño de un archivo alojado en el servidor, simplemente puede realizar una solicitud HEAD HTTP utilizando Ajax. Este tipo de solicitud se utiliza para obtener metainformación sobre la URL implícita en la solicitud sin transferir ningún contenido de la misma en la respuesta.
Al final de la solicitud HTTP, tenemos acceso a los encabezados HTTP de respuesta, incluida la longitud del contenido , que representa el tamaño del archivo en bytes.
Un ejemplo básico usando XHR sin formato :
var xhr = new XMLHttpRequest();
xhr.open('HEAD', 'img/test.jpg', true);
xhr.onreadystatechange = function(){
if ( xhr.readyState == 4 ) {
if ( xhr.status == 200 ) {
alert('Size in bytes: ' + xhr.getResponseHeader('Content-Length'));
} else {
alert('ERROR');
}
}
};
xhr.send(null);
Nota: Tenga en cuenta que cuando realiza solicitudes Ajax, está restringido por la política Mismo origen , que le permite realizar solicitudes solo dentro del mismo dominio.
Consulte una prueba de concepto funcional aquí .
Edición 3:
1.) Acerca de la longitud del contenido, creo que podría ocurrir una discrepancia en el tamaño, por ejemplo, si la respuesta del servidor está comprimida con gzip, puede hacer algunas pruebas para ver si esto sucede en su servidor.
2.) Para obtener las dimensiones originales de una imagen, puede crear un elemento IMG mediante programación, por ejemplo:
var img = document.createElement('img');
img.onload = function () { alert(img.width + ' x ' + img.height); };
img.src='http://sstatic.net/so/img/logo.png';
Verifique el tamaño de la imagen cargada usando Javascript
<script type="text/javascript">
function check(){
var imgpath=document.getElementById('imgfile');
if (!imgpath.value==""){
var img=imgpath.files[0].size;
var imgsize=img/1024;
alert(imgsize);
}
}
</script>
Código HTML
<form method="post" enctype="multipart/form-data" onsubmit="return check();">
<input type="file" name="imgfile" id="imgfile"><br><input type="submit">
</form>
Obtener las dimensiones originales de la imagen
Si necesita obtener las dimensiones de la imagen original (no en el contexto del navegador), las propiedades clientWidth y clientHeight no funcionan ya que devuelven valores incorrectos si la imagen se estira/reduce mediante CSS.
Para obtener las dimensiones originales de la imagen , utilice las propiedades naturalHeight y naturalWidth .
var img = document.getElementById('imageId');
var width = img.naturalWidth;
var height = img.naturalHeight;
PD : Esto no responde a la pregunta original ya que la respuesta aceptada hace el trabajo. Esto, en cambio, sirve como complemento.
Qué tal esto:
var imageUrl = 'https://cdn.sstatic.net/Sites/stackoverflow/img/sprites.svg';
var blob = null;
var xhr = new XMLHttpRequest();
xhr.open('GET', imageUrl, true);
xhr.responseType = 'blob';
xhr.onload = function()
{
blob = xhr.response;
console.log(blob, blob.size);
}
xhr.send();
http://qnimate.com/javascript-create-file-object-from-url/
Debido a la política del mismo origen , solo funciona bajo el mismo origen.
