微信小程序中的图片处理
来源:互联网 发布:郭天祥51单片机书 编辑:程序博客网 时间:2024/06/06 13:13
微信小程序中的图片处理
微信小程序中的<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
还有就是缩放和裁剪不会同时作用到一张图片上
1 0
- 微信小程序中的图片处理
- 图片处理程序
- ImageMagick 图片处理程序
- 微信小程序本地图片处理--按屏幕尺寸插入图片
- liferay 中的图片处理
- 处理数据库中的图片
- java中的图片处理
- android中的图片处理
- iOS中的图片处理
- Android中的处理图片
- 第十节、图片处理:html中的图片处理
- 程序中的异常处理
- 图片查看器处理程序
- MagicWand图片处理程序安装
- 一般处理程序处理图片上传下载
- J2ME游戏中的图片处理
- J2ME游戏中的图片处理
- 动态处理BIRT中的图片
- Android动画系列(二)
- 44.top10活跃session之开发准备以及top10品类RDD生成
- C++ 自定义排序函数
- Python笔记-os模块,操作系统的目录和文件操作
- SDUT 2192救基友记2
- 微信小程序中的图片处理
- L1-005
- 外部排序思想
- ViewPager显示两边的item
- 浅谈二分查找
- 【网络基础学习2】认识ICMP协议
- UItableview点击后的折叠效果的简单实现
- tensorflow35《TensorFlow实战》笔记-06-03 TensorFlow实现 GoogleInceptionV3 code
- ECLIPSE 链接数据库 MYSQL