首页 > 网络编程 > JavaScript > JavaScript实现获取img的原始尺寸的方法详解

JavaScript实现获取img的原始尺寸的方法详解

福牛 3月 31, 2023 69 0

在前端开发中我们几乎不需要获取img的原始尺寸，因为只要你不刻意设置图片的宽高它都会按照最佳比例渲染。但是在微信小程序开发时，它的image标签有一个默认高度，这样你的图片很可能出现被压缩变形的情况，所以就需要获取到图片的原始尺寸对image的宽高设置。

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

  1. <view style=“width:100%;“ >
  2.      <image src=“https://sf3-ttcdn-tos.pstatp.com/img/mosaic-legacy/3796/2975850990~300×300.image” bindload=“loadSuccess” style=“width:{{imageWidth}}px; height:{{imageHeight}}px“></image>
  3. </view>
  1. //js
  2. Page({
  3.      data: {
  4.      imageHeight: 0,
  5.      imageWidth: 0
  6.      },
  7.      loadSuccess(e){
  8.      const { detail: {width, height} } = e // // 这里获取到的就是图片原始尺寸
  9.      this.setData({
  10.      imageWidth: width,
  11.      imageHeight:height
  12.      })
  13.      }
  14. })

wx.getImageInfo

方法是wx.getImageInfo，微信官方文档 这个需要添加业务域名，服务端做接口验证。比较繁琐不推荐。

浏览器中获取图片尺寸的方法

  1. <!DOCTYPE html>
  2. <html lang=“en”>
  3. <head>
  4.      <meta charset=“UTF-8”>
  5.      <meta http-equiv=“X-UA-Compatible” content=“IE=edge”>
  6.      <meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
  7.      <title>img原始尺寸获取</title>
  8.      <style>
  9.      .image {
  10.          /* height: 20px; 这种写法没什么卵用 */
  11.      }
  12.      </style>
  13. </head>
  14. <body>
  15.      <img class=“image” referrerpolicy=“no-referrer” src=“https://image-static.segmentfault.com/193/916/1939169050-641cff9f16cdc_fix732”
  16.          style=“width: 300px;“>
  17.  
  18.      <script>
  19.      // 1. 获取DOM元素的渲染尺寸
  20.      const img = document.querySelector(‘.image’);
  21.      console.log(img.style.width) // 300px 获取到字符串
  22.      console.log(img.style.height) // 如果在标签行内样式没有设置 无法获取到
  23.  
  24.      // 2. 直接获取DOM元素的width和height属性
  25.      console.log(img.width) // 300 获取到的数字类型
  26.      console.log(img.height) // 533 可以获取到元素的渲染高度
  27.  
  28.      // 3. naturalWidth / naturalHeight (适用于Firefox/IE9/Safari/Chrome/Opera浏览器)
  29.      console.log(‘naturalWidth:’, img.naturalWidth) // naturalWidth: 412
  30.      console.log(‘naturalHeight:’, img.naturalHeight) // naturalHeight: 732
  31.  
  32.      // 4. 使用Image()对象异步获取图片原始尺寸
  33.      function getImageInfo(url) {
  34.          return new Promise((resolve, reject) => {
  35.          let image = new Image();
  36.          image.onload = () => {
  37.              resolve({
  38.              width: image.width,
  39.              height: image.height
  40.              })
  41.          }
  42.  
  43. image.onerror = () => {
  44.              reject(new Error(‘image load error’))
  45.          }
  46.  
  47.          image.src = url;
  48.          })
  49.      }
  50.  
  51.      (async () => {
  52.          let size = await getImageInfo(‘https://image-static.segmentfault.com/193/916/1939169050-641cff9f16cdc_fix732’)
  53.          console.log(size) // {width: 412, height: 732}
  54.      })()
  55.  
  56.      // 终极兼容写法 （首先检测浏览器是否支持img.naturalWidth，如果支持直接获取，不支持使用4.Image()对象获取）
  57.      async function getImageSize(img) {
  58.      if (img.naturalWidth) {
  59.          return {
  60.              width: img.naturalWidth,
  61.              height: img.naturalHeight
  62. }
  63.          } else {
  64.          return await getImageInfo(img.src)
  65.          }
  66.      }
  67.      </script>
  68. </body>
  69. </html>

到此这篇关于JavaScript实现获取img的原始尺寸的方法详解的文章就介绍到这了,更多相关javascript获取img原始尺寸内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

标签

相关推荐

发表评论