微信小程序获取图片的宽高,计算宽高比，image图片的bindload，image的wx.getImageInfor

1.背景

在某系场景下可能会需要获取图片的宽高，例如做楼盘相关的，楼栋分布，一张底图，然后每个楼栋号在不同页面的具体位置，就需要通过定位来实现。不能保证每一张楼栋分布底图的宽高比都一样，此时就须算出宽高比从而得到位置。

2.思路

2.1思路一：通过  wx.getImageInfo  方法，只需要一个图片的地址，就能获取图片的信息，这张图片的域名须在当前小程序中配置合法域名，必须为https协议，否则不能使用该方法。（所以说该方法有局限性，当如果解决以上局限性，使用起来也比较方便），下边例子来自官网，各个参数含义也可参考官网，可以看下效果。

2.1.1wxml

<view class="weui-panel">
  <view class="weui-panel__hd"></view>
  <view class="weui-panel__bd">
    <image mode='widthFix' src="{{src}}" style='width: 300px;'></image>
    <button bindtap="getImageInfo">getImageInfo</button>
  </view>
  <view class="weui-panel__ft"></view>
</view>

<view wx:if="{{!!info}}" class='result'>
  <text space="nbsp">{{info}}</text>
</view>

2.2.2wxss

.result {
  overflow-x: scroll;
  margin: 10px;
  padding: 10px;
  font-size: 14px;
  border-radius: 5px;
  border: 1px solid #DDD;
}

2.2.3js

const app = getApp()

Page({
  data: {
    src: 'http://mmbiz.qpic.cn/mmbiz_png/icTdbqWNOwNTTiaKet81gQJDXYnPiaJFSzRlp9frTTX2hSN01xhiackVLHHrG7ZQI3XQsbM7Gr9USZdN4f26SO5xjg/0?wx_fmt=png',
    info: '',
  },
  getImageInfo() {
    wx.getImageInfo({
      src: this.data.src,
      complete: (res) => {
        this.setData({
          info: this.format(res)
        })
      }
    })
  },
  format(obj) {
    return '{\n' +
      Object.keys(obj).map(function (key) { return '  ' + key + ': ' + obj[key] + ',' }).join('\n') + '\n' +
    '}'
  }
})

2.2思路二：image标签可以绑定一个bindload事件，当图片加载完成后执行该事件，从而获取图片的宽高。(这个比较好，使用比较方便)。通过event.detail.width,event.detail.height来获取宽度和高度。

2.2.1wxml

<image bindload='bindload' mode='widthFix' src="{{src}}" style='width: 300px;'></image>

2.2.2js

const app = getApp()

Page({
  data: {
    src: 'http://mmbiz.qpic.cn/mmbiz_png/icTdbqWNOwNTTiaKet81gQJDXYnPiaJFSzRlp9frTTX2hSN01xhiackVLHHrG7ZQI3XQsbM7Gr9USZdN4f26SO5xjg/0?wx_fmt=png',
    info: '',
  },
  bindload(e){
    console.log(e)
    var width = e.detail.width;
    var height = e.detail.height;
    console.log('width:',width)
    console.log('height:',height)
  },
})

3.对于多张图（通过promise，转为同步方法，在then回调中获取）

const promixify = (api) => {

  return (options, ...params) => {

    return new Promise((resolve, reject) => {

      api(Object.assign({}, options, { success: resolve, fail: reject }), ...params)

    })

  }

}



const getImageInfo = promixify(wx.getImageInfo)

const images = ['img1.jpg', 'img2.jpg', 'img3.jpg']

Promise.all(

  images.map(img => getImageInfo({ src: img }))

).then((imageInfos) => {

  console.log(imageInfos)

})

4.说明

4.1  推荐使用方法二，只需要提供一个图片路径即可。

4.2  例如做楼栋鸟瞰图分布的思路，一张底图按照宽高比做缩放，通过定位计算left和top值，计算展示各个位置。