Comment déterminer la taille et les dimensions d’une image dans un navigateur Web ?

Détermination de la taille et des dimensions du fichier image dans le navigateur

Introduction

Dans le développement Web, il est souvent nécessaire de récupérer des informations sur les images affichées sur un page Web, comme la taille et la résolution de leur fichier. Ces informations peuvent être utiles à des fins d'affichage ou pour optimiser les performances de la page.

Solution

Taille du fichier :

1. XMLHttpRequest (HEAD Request) : Cette méthode permet de récupérer la taille d'un fichier hébergé sur le serveur sans télécharger le dossier entier. La réponse inclut l'en-tête Content-Length qui spécifie la taille du fichier en octets.

   var xhr = new XMLHttpRequest();
   xhr.open('HEAD', 'img/test.jpg', true);
   xhr.onload = function() {
     alert('Size in bytes: ' + xhr.getResponseHeader('Content-Length'));
   };
   xhr.send();

Résolution (dimensions en pixels dans le navigateur) :

1. clientWidth/clientHeight : Ces propriétés renvoient la largeur et la hauteur en pixels de un élément DOM, y compris le contenu, mais à l'exclusion de la bordure et de la marge.

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

Dimensions d'origine (taille de l'image avant le rendu du navigateur) :

1. Créer un élément d'image par programme : Créez un élément d'image dans le DOM et définissez sa source sur le URL de l'image. Une fois l'image chargée, vous pouvez accéder à ses propriétés de largeur et de hauteur pour obtenir les dimensions d'origine.

   var img = document.createElement('img');
   
   img.onload = function() {
     alert(img.width + ' x ' + img.height);
   };
   
   img.src = 'http://sstatic.net/so/img/logo.png';

Remarques

• Pensez à la compression gzip lorsque vous utilisez l'option Méthode Content-Length, car elle peut fournir des informations inexactes sur la taille des fichiers.
• Assurez-vous de respecter la politique de même origine lors de la création de fichiers multi-domaines. Demandes Ajax.

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!