微信小程序中的图片处理

微信小程序中的图片处理

微信小程序中的 用于向页面中插入图片。有两个重要的属性

1、 src  要插入图片的资源地址

2、 mode    图片裁剪、缩放的模式

下面仔细说一下mode属性

当我们不知道获取到图片的宽高或者需要对图片进行一些处理时，这个属性十分有用！

mode属性为大家提供了4 种是缩放模式，9 种是裁剪模式。

缩放模式：

（1）scaleToFill  不保持纵横比缩放。也就是图片会填满你所设置的组件的宽高。

（2）aspectFit  保持纵横比缩放，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。

（3）aspectFill  保持纵横比缩放，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。这时小程序是采用截取图片中间部分的形式。

一张图片 宽175px （长边）高150px（短边）

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

可以看到对于长边的截取方式是中间的那一部分，掐头去尾。

（4）widthFix   宽度不变，高度自动变化，保持原图宽高比不变

裁剪模式

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

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

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

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

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