如何決定網頁瀏覽器中圖像的大小和尺寸？

確定瀏覽器中的圖像檔案大小和尺寸

簡介

在Web 開發中，通常需要檢索有關顯示在瀏覽器上的圖像的資訊網頁，例如檔案大小和解析度。此資訊可用於顯示目的或最佳化頁面效能。

解決方案

檔案大小：

1. XMLHttpRequest (HEAD Request):

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

   登入後複製

解析度（瀏覽器內像素尺寸）：

1. cliclientth/entd 這些屬性傳回DOM 元素的像素寬度和高度，包括內容，但不包括邊框和邊距。

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

   登入後複製

原始尺寸（瀏覽器渲染之前的圖片大小）：

1. 以程式設計🎜>方式建立影像元素：建立影像元素在DOM 中並將其來源設定為影像URL。圖像加載後，您可以訪問其寬度和高度屬性以獲取原始尺寸。

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

   登入後複製

使用時請考慮 gzip 壓縮Content-Length 方法，因為它可能提供不準確的檔案大小資訊。
• 確保在發出跨域 Ajax 請求時遵守同源策略。

以上是如何決定網頁瀏覽器中圖像的大小和尺寸？的詳細內容。更多資訊請關注PHP中文網其他相關文章！