uni-app和JavaScript获取图片信息的总结

陆先森

uni-app获取图片信息

获取图片信息这一功能，如果是常规的网页布局其实并非太过重要，直接渲染即可。
可倘若需要完成类似瀑布流的图片信息布局，那么在渲染前或许图片信息，以便完成高度的计算就很重要了。
先从uni-app获取图片信息开始。

function getImgInfo(imgUrl){
    uni.getImageInfo({ 
      src: imgUrl, 
      success: function (image) { 
        console.log(image.width); 
        console.log(image.height); 
      } 
    });
}

这里获取的是图片原始尺寸，如果用在瀑布布局中，需要根据容器尺寸等比进行换算。

JavaScript获取图片尺寸

uni-app的方法毕竟是基于uni-app的，使用的用户可能相对会少点，大多数时候用的多的还是JavaScript原生，或者是Vue，react框架开发。
这时就要考虑在原生JavaScript下如何去获取图片信息了。
这里就要用到一个JavaScript的接口new Image()图片对象了。

var imgLoad = function (url, callback, context) {
  var img = new Image();

  img.src = url + `?timeStamp=${+new Date()}`;
  if (img.complete) {
    callback.call(context, img.width, img.height);
  } else {
    img.onload = function () {
      callback.call(context, img.width, img.height);
      img.onload = null;
    };
  };
};

这里可以看到，在图片地址出手动加了一个时间戳参数，这是考虑到可能一张图片多次获取或读取缓存，添加时间戳保证获取的图片是新的， 如果获取的图片不需要考虑这种情况，可以不使用。

以上就是两种获取图片的信息的简单介绍了，实际开发中还可以根据需求优化处理。