前言

我们如何在微信小程序中获取一张图片的原始宽度和高度呢？原来微信小程序 image 组件提供了这样的能力，那这又有什么应用场景呢？

官方文档

wxml

	<image
	 class="img"
	 style="width:{{w}};height:{{h}}"
	 src="{{data.img}}"
	 bind:load="onImgLoad"
	/>

js

onImgLoad: function (e) {
  const { width, height } = e.detail;
},

有什么应用场景呢

实时计算图片高度和宽度保证图片不失真

  // 如果宽度固定是340rpx 那么高度就应该这么计算
  onImgLoad: function (e) {
      const { width, height } = e.detail;
      this.setData({
        w: 340 + 'rpx',
        h: (340 * height / width) + 'rpx'
      });
    },