JS获取图片真实的宽高

今天遇到一个有关获取图片真实宽高的问题，不管怎么获取，拿到的宽高都是0。然后在网上找了一下解决方法，在这边记录一下，供大家参考。

需求介绍：

• 进入页面之后，首先是调接口，根据返回的图片的url，将图片展示在页面上。因为图片是展示在固定区域内，只允许等比例缩放，不允许拉伸，也就是说，当图片宽高大于这一区域的时候，图片等比例缩放，当图片宽高小于这一区域的时候，就展示图片真实的大小。

解决办法

• 要实现上面的需求，就需要获取到图片真实的宽高，然后与展示区域的宽高进行对比，将图片展示在特定区域。
• 通过jquery或原生js获取图片的宽高都是0，是因为图片的相关数据都没有被加载前它的宽高默认就是0，所以需要等图片加载完毕再执行相应的操作，比如获取图片的大小，图片进行对比。

解决步骤

• 需要创建一个img对象，var img = new Image()
• 指定图片的src路径
• 通过complete与onload一起混合使用， 如果图片被缓存，则直接返回缓存数据，如果没有，执行onload函数，即图片加载完毕执行后续的操作，img.load=function(){}

JS代码

	<div id='Img2'>
		<img src="xxxxx" alt="" className='city_group_map' />
	</div>

    function getImage(url, callback) {
      var img = new Image();//创建一个image对象
      img.src = url;
      // 如果图片被缓存，则直接返回缓存数据
      if (img.complete) {
        callback(img.width, img.height);
      } else {
        img.onload = function () {
          callback(img.width, img.height);
        }
      }
    }

	$(function () {
      var imgSrc = $(".city_group_map").attr("src");//获取图片的路径
      getImage(imgSrc, function (w, h) {//w,h即为真实的宽高
        showImg(w, h)
      });
    });

	//对图片进行的一系列操作----真实大小展示，或者等比例缩放
	function showImg(w, h) {

      let wrap = document.querySelector('#Img2')//内容框
      let wrapWidth = wrap.style.width
      let wrapHeight = wrap.style.height
      let img = document.querySelector('.city_group_map')//图片
      
      //图片与内容框进行宽高的对比，设置图片的缩放比例
      if (w < parseFloat(wrapWidth) && h > parseFloat(wrapHeight)) {
        img.style.height = '100%'

      } else if (w <= parseFloat(wrapWidth) && h <= parseFloat(wrapHeight)) {
        img.style.width = w + 'px';
        img.style.height = h + 'px';

      } else if (w > parseFloat(wrapWidth) && h < parseFloat(wrapHeight)) {
        img.style.width = '100%'

      } else if (w > parseFloat(wrapWidth) && h > parseFloat(wrapHeight)) {
        w / h > 75 / 84 ? img.style.width = '100%' : img.style.height = '100%'
    }
  }

参考文章

• JS快速获取图片宽高的方法
• js和jquery如何获取图片真实的宽度和高度
• 【jQuery】获取图片img的真实宽高大小