Comment déterminer la taille et les dimensions du fichier image avec JavaScript ?

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

Dans cet article, nous explorerons comment déterminer la taille du fichier (en kilo-octets) et résolution d'une image directement dans le contexte du navigateur à l'aide de JavaScript. Ces informations peuvent être utiles pour l'afficher sur la page Web ou pour effectuer diverses opérations.

Récupération des dimensions en pixels

Pour obtenir la taille actuelle en pixels d'un élément d'image dans le le navigateur, à l'exclusion de sa bordure et de sa marge, utilise clientWidth et clientHeight propriétés.

Récupération de la taille du fichier

L'obtention de la taille d'un fichier hébergé sur le serveur peut être obtenue via une requête HTTP Ajax HEAD. Cette méthode récupère les en-têtes HTTP sans transférer le contenu du fichier. L'en-tête Content-Length fournit la taille du fichier en octets.

Remarque : Cette approche est soumise à la politique de même origine, qui restreint les requêtes au même domaine.

Récupération des dimensions d'origine de l'image

Pour déterminer les dimensions d'origine d'une image, créez dynamiquement un élément d'image HTML. Définissez son événement onload pour accéder à ses propriétés de largeur et de hauteur après le chargement de l'image.

Exemples de code :

• Pixels Dimensions :

  var img = document.getElementById('imageId');
  
  var width = img.clientWidth;
  var height = img.clientHeight;

• Taille du fichier à l'aide de la requête HEAD :

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

• Dimensions de l'image originale :

  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!