微信小程序獲取圖片的寬高,計算寬高比，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.說明

3.1  推薦使用方法二，只需要提供一個圖片路徑即可。

3.2  例如做樓棟鳥瞰圖分佈的思路，一張底圖按照寬高比做縮放，通過定位計算left和top值，計算展示各個位置。