Comment puis-je obtenir la taille et les dimensions d'un fichier image en JavaScript ?

Détermination de la taille et des dimensions du fichier image en Javascript

Dans une application Web, déterminer la taille du fichier d'une image (en Ko) et la résolution directement depuis le contexte du navigateur est essentiel à diverses fins, comme l'affichage de ces informations sur la page. Cet article explore les solutions permettant d'obtenir cette fonctionnalité multi-navigateurs sans recourir aux contrôles ActiveX ou aux applets Java.

Récupération des dimensions de l'image

Pour obtenir la taille en pixels d'un élément d'image dans le navigateur, à l'exclusion de la bordure et de la marge, on peut utiliser clientWidth et clientHeight propriétés :

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

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

Détermination de la taille du fichier

Malheureusement, les API du navigateur ne prennent pas en charge directement l'accès à la taille du fichier d'une image. Cependant, une solution de contournement consiste à effectuer une requête HTTP HEAD à l'aide d'Ajax :

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

Remarque : Cette méthode est soumise à la politique de même origine, autorisant les requêtes uniquement dans le même domaine.

Considérations supplémentaires

• La valeur de l'en-tête Content-Length peut ne pas être précise refléter la taille réelle de l'image si la réponse est compressée (par exemple, gzippée).
• Pour obtenir les dimensions de l'image d'origine sans charger entièrement l'image dans le document, créez un élément d'image par programme et attribuez la source 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!