微信小程序中的图片处理


微信小程序中的 <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

不缩放图片，只显示图片的右下边区域

还有需要注意的之前我们说过的裁剪和缩放都是在指定了<image>组件宽高的情况。小程序中默认<image>的

宽度300px、高度225px

但是当我们进行裁剪和缩放时会发现，小程序中给出的默认宽度却是320px

还有就是缩放和裁剪不会同时作用到一张图片上