溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

JavaScript怎么實現(xiàn)獲取img的原始尺寸

發(fā)布時間：2023-03-31 14:45:15 來源：億速云 閱讀：121 作者：iii 欄目：開發(fā)技術(shù)

本篇內(nèi)容主要講解“JavaScript怎么實現(xiàn)獲取img的原始尺寸”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學(xué)習(xí)“JavaScript怎么實現(xiàn)獲取img的原始尺寸”吧!

在前端開發(fā)中我們幾乎不需要獲取img的原始尺寸，因為只要你不刻意設(shè)置圖片的寬高它都會按照最佳比例渲染。但是在微信小程序開發(fā)時，它的image標(biāo)簽有一個默認(rèn)高度，這樣你的圖片很可能出現(xiàn)被壓縮變形的情況，所以就需要獲取到圖片的原始尺寸對image的寬高設(shè)置。

微信小程序獲取image原始尺寸的方法

<view  >
 <image src="https://sf3-ttcdn-tos.pstatp.com/img/mosaic-legacy/3796/2975850990~300x300.image" bindload="loadSuccess" ></image>
</view>
//js
Page({
 data: {
  imageHeight: 0,
  imageWidth: 0
 },
 loadSuccess(e){
  const { detail: {width, height} } = e // // 這里獲取到的就是圖片原始尺寸
  this.setData({
    imageWidth: width,
    imageHeight:height
  })
 }
})

wx.getImageInfo

方法是wx.getImageInfo，微信官方文檔 這個需要添加業(yè)務(wù)域名，服務(wù)端做接口驗證。比較繁瑣不推薦。

瀏覽器中獲取圖片尺寸的方法

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>img原始尺寸獲取</title>
  <style>
    .image {
      /* height:  20px;  這種寫法沒什么卵用 */ 
    }
  </style>
</head>
<body>
  <img class="image" referrerpolicy="no-referrer" src="https://image-static.segmentfault.com/193/916/1939169050-641cff9f16cdc_fix732"
       >

  <script>
    // 1. 獲取DOM元素的渲染尺寸
    const img = document.querySelector('.image');
    console.log(img.style.width)  // 300px 獲取到字符串
    console.log(img.style.height) // 如果在標(biāo)簽行內(nèi)樣式?jīng)]有設(shè)置 無法獲取到

    // 2. 直接獲取DOM元素的width和height屬性
    console.log(img.width)        // 300 獲取到的數(shù)字類型
    console.log(img.height)       // 533 可以獲取到元素的渲染高度

    // 3. naturalWidth / naturalHeight (適用于Firefox/IE9/Safari/Chrome/Opera瀏覽器)
    console.log('naturalWidth:', img.naturalWidth)   // naturalWidth: 412
    console.log('naturalHeight:', img.naturalHeight) // naturalHeight: 732

    // 4. 使用Image()對象異步獲取圖片原始尺寸
    function getImageInfo(url) {
      return new Promise((resolve, reject) => {
        let image = new Image();
        image.onload = () => {
          resolve({
            width: image.width,
            height: image.height
          })
        }

        image.onerror = () => {
          reject(new Error('image load error'))
        }

        image.src = url;
      })
    }

    (async () => {
      let size = await getImageInfo('https://image-static.segmentfault.com/193/916/1939169050-641cff9f16cdc_fix732')
      console.log(size) // {width: 412, height: 732}
    })()

    // 終極兼容寫法 （首先檢測瀏覽器是否支持img.naturalWidth，如果支持直接獲取，不支持使用4.Image()對象獲取）
    async function getImageSize(img) {
      if (img.naturalWidth) {
        return {
          width: img.naturalWidth,
          height: img.naturalHeight
        }
      } else {
        return await getImageInfo(img.src)
      }
    }
  </script>
</body>
</html>

到此，相信大家對“JavaScript怎么實現(xiàn)獲取img的原始尺寸”有了更深的了解，不妨來實際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進入相關(guān)頻道進行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！

向AI問一下細節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手