微信小程序图片加载

微信小程序里面显示图片会用到 image 组件，该组件默认宽度300px、高度225px，使用时需要自己设置宽度 width、高度 height 以及图片资源地址 src。当图片资源为本地图片时，可以先查看其宽高，再设置为 image 的 width 和 height，但是当图片是从网络上加载，并不能提前确定其宽高时，需要考虑怎样才能使其自动适应宽高，并按期望显示。

image 有一个 mode 属性，该属性有 13 种模式，其中 4 种是缩放模式，9 种是裁剪模式：

缩放模式：
scaleToFill    不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素
aspectFit    保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。
aspectFill    保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。
widthFix    宽度不变，高度自动变化，保持原图宽高比不变

裁剪模式：
top    不缩放图片，只显示图片的顶部区域
bottom    不缩放图片，只显示图片的底部区域
center    不缩放图片，只显示图片的中间区域
left    不缩放图片，只显示图片的左边区域
right    不缩放图片，只显示图片的右边区域
top left    不缩放图片，只显示图片的左上边区域
top right    不缩放图片，只显示图片的右上边区域
bottom left    不缩放图片，只显示图片的左下边区域
bottom right    不缩放图片，只显示图片的右下边区域        

一般情况下从网络上加载图片时，由于图片的尺寸未知，为了防止图片过宽或过长，因此不会完全按照图片的尺寸设置宽高，而是给定一个最大的宽度和高度，目标是将图片按照原始比例并在合适的可视范围内显示。
首先为 image 的 bindload 属性绑定一个方法，该方法会在图片加载完成时调用，从而获取图片尺寸，当图片尺寸获取到后，根据最大宽高计算最终的尺寸，并保存在 data 中定义的数据中，之后在 image 中通过 style 属性将 width 和 height 设置为保存的数据即可。另外由于图片可能加载失败，那么可以绑定binderror属性，在加载失败时设置 width 和 height，避免 image 的尺寸不符合预期，也可以在 data 中设置期望的加载失败时的宽高。代码如下：

<image src="{{pic}}" style="width:{{picSize.width}}rpx;height:{{picSize.height}}rpx;" bindload="imageLoad" />

Page({
  data: {
    picSize: { "width": 320, "height": 320}
  },
  imageLoad: function (e) {
    var maxSize = 320;
    var imgWidth = e.detail.width;
    var imgHeight = e.detail.height;
    var ratio = imgWidth / imgHeight;
    var picSize;
    if (imgWidth >= imgHeight && imgWidth > maxSize) {
      // 如果是宽图并且宽度超过最大宽度，则以最大宽度作为最终宽度并按原始比例计算高度
      picSize = { "width": maxSize, "height": maxSize/ ratio };
    } else if (imgHeight > imgWidth && imgHeight > maxSize) {
      // 如果是长图并且高度超过最大高度，则以最大高度作为最终高度并按原始比例计算宽度
      picSize = { "width": maxSize* ratio, "height": maxSize};
    } else {
      // 如果宽高都在最大限度之内则最终宽高为图片的原始尺寸
      picSize = { "width": imgWidth, "height": imgHeight };
    }
    this.setData({
      picSize: picSize
    })
  }
})