Comment obtenir la taille et les dimensions d’un fichier image à l’aide de JavaScript ?

Détermination de la taille du fichier et des dimensions des images via JavaScript

Question :

Comment pouvez-vous déterminer la taille du fichier (en Ko) et la résolution d'une image rendue sur une page Web en utilisant uniquement JavaScript d'une manière compatible avec tous les navigateurs ?

Réponse :

Obtention des dimensions en pixels :

Pour récupérer la taille actuelle en pixels dans le navigateur d'un élément d'image, à l'exclusion des bordures et des marges, utilisez le JavaScript suivant :

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

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

Récupération de la taille du fichier :

• Option 1 : Requête HTTP HEAD (recommandée)

Faire une requête HEAD au serveur hébergeant le image en utilisant XMLHttpRequest. L'en-tête Content-Length dans la réponse HTTP contient la taille du fichier en octets.

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

• Option 2 : propriété de taille de fichier d'élément (IE uniquement)

Cette méthode n'est applicable que dans Internet Explorer :

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

Obtention des dimensions d'image originales :

Créez un élément IMG par programme et utilisez son événement onload pour récupérer les dimensions originales de l'image :

var img = document.createElement('img');

img.onload = function () { alert(img.width + ' x ' + img.height); };

img.src='http://sstatic.net/so/img/logo.png';

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!