小程序图片规范
[TOC]
小程序图片规范
水印
业务方水印有且只有一种，pms 只能是pms后缀的水印。如果某些域名不支持水印让运维加上。
水印
- -pms_half：320*240 中图
- -pms_htn：180*180 缩略图*
- -pms_wk： 1000*800 大图
- -pms_original 原图
图片裁剪、缩放的模式
| mode | 模式 |
|---|---|
| scaleToFill | 缩放模式，不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素（默认情况下这种） |
| aspectFit | 缩放模式，保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。 |
| aspectFill | 缩放模式，保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。 |
| widthFix | 缩放模式，宽度不变，高度自动变化，保持原图宽高比不变 |
| heightFix | 缩放模式，高度不变，宽度自动变化，保持原图宽高比不变 |
| top | 裁剪模式，不缩放图片，只显示图片的顶部区域。仅 Webview 支持。 |
| bottom | 裁剪模式，不缩放图片，只显示图片的底部区域。仅 Webview 支持。 |
| center | 裁剪模式，不缩放图片，只显示图片的中间区域。仅 Webview 支持。 |
| left | 裁剪模式，不缩放图片，只显示图片的左边区域。仅 Webview 支持。 |
| right | 裁剪模式，不缩放图片，只显示图片的右边区域。仅 Webview 支持。 |
| top left | 裁剪模式，不缩放图片，只显示图片的左上边区域。仅 Webview 支持。 |
| top right | 裁剪模式，不缩放图片，只显示图片的右上边区域。仅 Webview 支持。 |
| bottom left | 裁剪模式，不缩放图片，只显示图片的左下边区域。仅 Webview 支持。 |
| bottom right | 裁剪模式，不缩放图片，只显示图片的右下边区域。仅 Webview 支持。 |
常用模式：aspectFit、aspectFill
aspectFit
使用场景
想让图片完整出来，比如说品牌logo等（最大边展示，最小边填充）
效果图
aspectFill
使用场景
保证图片能完整的填充规定的范围，而且图片不被拖拽。（最小边展示，最大边切割）
效果图
图片加载优化
现状问题
在用户访问列表或者一些详情页面，可能展示区只需要64*64、300*200，但是原图是1200*800，带来的问题
- 浪费用户流量
- 长时间白屏问题，（当然可以通过懒加载方式处理，体验还是差点）
- 可能带来一些性能问题。
解决方案
利用七牛云的裁剪降低展示图大小
https://pmsimage.location.pub/01fc8883089391da110e7a1acf97b579-pms_wk?imageView2/1/w/200/h/200
小程序分享图优化
现状问题：
- Android系统如果图片exit信息种带有旋转参数会识别，并呈现。带来的问题是分享出来的图片旋转了
- 分享图片如果过大，带来的问题分享确认框会有个加载过程，此时用户不等待图片加载完成去分享，分享出去封面是空白的
解决方案：
分享图加水印 -pms_half