21.小程序的 image 组件提供了 4 种缩放模式、9 种裁剪模式

在实际项目中，经常要面对原始图片的尺寸和设计图里的尺寸不一样的情况（尤其是原始图片高宽是未知和不固定的情况，比如动态从网络获取图片）。在这种情况下，我们必须要有所舍弃，或放弃等比例，或裁剪掉图片的一部分。接受不完美，也是编程中很重要的心态，如何选择，需要看业务上的需求。

小程序的 image 组件提供了 4 种缩放模式、9 种裁剪模式，共计 13 种模式，来支持我们的选择。

接下来我们以官网的图对这些模式做简单的说明和演示，先看下官网原图：

image

4 种缩放模式

• scaleToFill （默认值） 不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素。
• aspectFit 保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。
  意思就是说，将图片缩放到刚好能居中放入 image 中，此时 image 可以有空白部分。
• aspectFill 保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。
• widthFix 宽度不变，高度自动变化，保持原图宽高比不变。
  意思就是以 image 的宽为准，将原图按比例缩放至正好能放入 image 中，此时image 的高度就是缩放后的图片高度，也就是说 image 不会有多余空白部分。

9 种裁剪模式（只裁剪不缩放）

• top 显示图片的顶部区域。
• bottom 显示图片的底部区域。
• center 显示图片的中间区域。
• left 显示图片的左边区域。
• right 显示图片的右边区域。
• top left 显示图片的左上边区域。
• top right 显示图片的右上边区域。
• bottom left 显示图片的左下边区域。
• bottom right 显示图片的右下边区域。

这几种裁剪模式还是很好理解的，比如假设下面每个黄色框表示一个 image 组件，当 mode 依次等于这 9 种裁剪模式时，显示的效果就是每个黄框的内容：

小结

4 种缩放模式，带有 Fill 的会填满 image，widthFix 会重新调整 image 的高度。
image 的默认模式是 scaleToFill。
image 组件默认大小是 300px * 225px，建议自己设置大小。
image 组件中二维码/小程序码图片不支持长按识别，仅在 wx.previewImage 中支持长按识别。