Determinación del tamaño o dimensiones del archivo de imagen a través de Javascript?

Question

Como parte de una aplicación web, una vez que las imágenes se han descargado y renderizado en una página web, necesito determinar el tamaño del archivo y la resolución en el contexto del navegador (para poder, por ejemplo, mostrar esa información) la página. Esto debe hacerse desde el lado del cliente, obviamente. Debe poder resolverse x-browser sin un control ActiveX o applet de Java (IE7 +, FF3 +, Safari 3+, IE6 es bueno tenerlo), aunque no lo hace tiene que ser la misma solución por cada navegador.

lo ideal sería que esto se haría utilizando el sistema de Javascript, pero si tienen una necesidad imperiosa de una biblioteca jQuery o similar (o un pequeño subconjunto de la misma), que se podría hacer.

Answer 1

Editar:

Para obtener el tamaño actual en el navegador de píxeles de un elemento DOM (en su caso los elementos IMG) con exclusión de la frontera y el margen, puede utilizar los clientWidth y clientHeight propiedades.

var img = document.getElementById('imageId'); 

var width = img.clientWidth; 
var height = img.clientHeight; 

ahora para obtener el tamaño de archivo, ahora sólo puedo pensar en el fileSize property que Internet Explorer expone por documentos y elementos IMG ...

Edición 2: Algo viene a la mente ..

Para obtener el tamaño de un archivo alojado en el servidor, simplemente puede hacer un HEAD HTTP Request usando 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, incluido el Content-Length que representa el tamaño del archivo en bytes.

Un ejemplo básico usando prima XHR:

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 se hace peticiones Ajax, se encuentra restringido por la Same origin policy, lo que le permite hacer solicitudes sólo dentro del mismo dominio .

Compruebe una prueba de concepto en funcionamiento here.

Datos 3:

1.) Sobre el Content-Length, creo que una falta de coincidencia de tamaño podría ocurrir por ejemplo si se gzipped la respuesta del servidor, puede hacer algunas pruebas para ver si esto sucede en tu 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'; 

Answer 2

Puede obtener las dimensiones usando getElement(...).width y ...height.

Como JavaScript no puede acceder a nada en el disco local por razones de seguridad, no puede examinar los archivos locales. Esto también es cierto para los archivos en el caché del navegador.

Realmente necesita un servidor que pueda procesar solicitudes AJAX. En ese servidor, instale un servicio que descargue la imagen y guarde la secuencia de datos en una salida ficticia que solo cuenta los bytes. Tenga en cuenta que no siempre puede confiar en el campo de encabezado Content-length ya que los datos de la imagen pueden estar codificados. De lo contrario, sería suficiente enviar una solicitud HTTP HEAD.

Answer 3

La única cosa que puede hacer es subir la imagen a un servidor y verificación el tamaño y la dimensión de la imagen usando algún lenguaje del lado del servidor como C#.

Editar:

Su necesidad no se puede hacer uso de JavaScript.

Answer 4

puede encontrar dimensión de una imagen en la página usando algo como

document.getElementById('someImage').width 

tamaño del archivo, sin embargo, tendrá que utilizar el servidor del lado algo

Answer 5

var img = new Image(); 
img.src = sYourFilePath; 
var iSize = img.fileSize; 

Answer 6

Compruebe el tamaño de la imagen subida utilizando el código 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> 

HTML

<form method="post" enctype="multipart/form-data" onsubmit="return check();"> 
<input type="file" name="imgfile" id="imgfile"><br><input type="submit"> 
</form> 

Answer 7

Trabajadores de los servicios tienen acceso a la cabecera informaciones, incluyendo la cabecera Content-Length.

Los trabajadores del servicio son un poco complicados de entender, así que he creado una pequeña biblioteca llamada sw-get-headers.

de lo que necesita:

1. suscribirse al evento de la biblioteca response
2. identificar la URL de la imagen entre toda la red solicita
3. aquí tienes, se puede leer el encabezado Content-Length!

Tenga en cuenta que su sitio web tiene que estar en HTTPS utilizar Trabajadores de Servicios, el navegador debe ser compatible con trabajadores de los servicios y las imágenes deben estar en el mismo origen como su página.

Answer 8

La mayoría de las personas han respondido cómo se pueden conocer las dimensiones de una imagen descargada, así que intentaré responder a otra parte de la pregunta, conociendo el tamaño de archivo de la imagen descargada.

Puede hacerlo utilizando recursos de api de sincronización. Muy específicamente, las propiedades de TransferSize, encodedBodySize y decodedBodySize se pueden usar para este propósito.

Salida mi respuesta aquí por fragmento de código y más información si lo buscan: JavaScript - Get size in bytes from HTML img src

Answer 9

¿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 política del mismo origen, sólo el trabajo bajo el mismo origen

Answer 10

Obtención del original Dime de la imagen

Si necesita obtener las dimensiones de la imagen original (no en el contexto del navegador). Por esta razón, clientWidth y clientHeight propiedades no funcionó ya que devuelve valores falsos si la imagen se estira/reduce mediante css.

Para obtener dimensiones originales, utilice naturalHeight y naturalWidth propiedades.

var img = document.getElementById('imageId'); 

var width = img.naturalWidth; 
var height = img.naturalHeight; 

p.s. Esto no responde a la pregunta original ya que la respuesta aceptada hace el trabajo. Esto, en cambio, sirve como agregado a eso.