微信小程序中的图片处理

微信小程序中的image/image用于向页面中插入图片。有两个重要的属性1、src 要插入图片的资源地址2、mode 图片裁剪、缩放的模式
下面仔细说一下mode属性当我们不知道获取到图片的宽高或者需要对图片进行一些处理时，这个属性十分有用！mode属性为大家提供了4 种是缩放模式，9 种是裁剪模式。缩放模式：（1）scaleToFill 不保持纵横比缩放。也就是图片会填满你所设置的image组件的宽高。（2）aspectFit 保持纵横比缩放，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。（3）aspectFill 保持纵横比缩放，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。这时小程序是采用截取图片中间部分的形式。一张图片宽175px （长边）高150px（短边）

如果image组件设置的宽高为宽200px 高200px，为了让图片的短边全部显示出来，图片的短边会放大到200px，还要保持纵横比，长边也会按照一定的比例放大。但是长边多余的部分会被截取。小程序

可以看到对于长边的截取方式是中间的那一部分，掐头去尾。
（4）widthFix 宽度不变，高度自动变化，保持原图宽高比不变

裁剪模式

裁剪模式比较简单。下面是官方文档的解释

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