Comment puis-je déterminer la taille du fichier et les dimensions d'une image à l'aide de JavaScript ?

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

Dans les applications Web, il devient nécessaire de récupérer des informations sur les images affichées sur les pages Web. Une exigence courante consiste à déterminer la taille et la résolution du fichier d'une image entièrement dans le contexte du navigateur. Cet article explore diverses techniques multi-navigateurs pour accomplir cette tâche.

Obtention des dimensions de l'image

Pour déterminer la résolution d'une image affichée sur la page Web, vous pouvez utiliser les propriétés clientWidth et clientHeight de l'élément DOM contenant l'image. Cette approche renvoie les dimensions en pixels de l'image dans le navigateur, à l'exclusion des bordures ou des marges.

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

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

Récupération de la taille du fichier

Pour obtenir la taille du fichier d'un image, une option consiste à utiliser la propriété fileSize disponible dans Internet Explorer pour les éléments document et IMG. Cependant, cette approche est limitée à IE et n'est pas prise en charge dans d'autres navigateurs.

Utilisation des requêtes HTTP HEAD

Une technique plus polyvalente consiste à émettre une requête HTTP HEAD au l'URL de l'image. Les requêtes HEAD récupèrent les métadonnées sur une ressource sans télécharger son contenu. Les en-têtes de réponse incluent Content-Length, représentant 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);

Remarque : Les requêtes Ajax sont soumises à la politique de même origine, ce qui signifie qu'elles ne peuvent accéder qu'aux ressources. du même domaine que la page Web.

Récupération des dimensions de l'image originale

Pour déterminer la Dimensions d'origine d'une image avant de la redimensionner ou de la recadrer, vous pouvez créer un élément IMG par programme et définir son événement onload pour récupérer ses dimensions.

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!