对于很多产品来说，图片模块已经是必不可少的的需求了。在这方面，或可分为以下部分：
1、图片上传
1.1 图片宽高边界问题
设上传的图片最大尺寸为 1280*1280 px。当图片宽高超过此限度时，上传需进行本地尺寸压缩处理。压缩规则如下：
1）宽高均小于 1280px 时，不压缩处理。
2）宽高均大于 1280 px 时，若宽高比大于等于 2，则较小者压缩到 1280，较大者按图片比例压缩；若宽高比小于 2，则较大者压缩到 1280，较小者按图片比例压缩。
3）宽大于 1280 而高小于 1280 时，若宽高比大于等于 2，则不压缩；若宽高比小于 2，则较大者压缩，较小者按图片比例压缩。
4）宽小于 1280px 而高大于 1280px 时，若宽高比小于 2，则较大者压缩，较小者按图片比例压缩。
1.2 图片大小问题
设上传的图片大小最大值 1000kb 。当图片超过质量此限度时，上传需进行本地大小压缩处理。压缩规则如下：
1）当图片大小小于等于 1000kb 时，不压缩。
2）当图片大小大于 1000kb 时，压缩至原大小的 70%。
2、图片展示
2.1 图片缩略图展示
设缩略图尺寸为 150*150 px：
1）宽高均小于 150 px 时，或者图片居中显示，外部用黑色填充；或者使短边放大为缩略图边长，长边按图片比例放大，缩略图展示图片中间区域。
2）宽高均大于 150 px 时，或者直接展示图片中间区域；或者使短边缩小为缩略图边长，长边按图片比例缩小，缩略图展示图片中间区域。
3）宽大于 150 px 而高小于 150 px 时，或者直接展示图片中间区域，外部用黑色填充；或者使短边放大为缩略图边长，长边按图片比例放大，缩略图展示图片中间区域。
4）宽小于 150 px 而高大于 150 px 时，或者直接展示图片中间区域，外部用黑色填充；或者使短边放大为缩略图边长，长边按图片比例放大，缩略图展示图片中间区域。
注：直接展示可能降低信息传达效率，放大/缩小展示可能使信息传达缺失，须根据实际情况作出决策。
2.1 图片全屏展示
设手机屏幕宽为750 px：
1）宽高均小于 750 px 时，图片居中显示，外部用黑色填充
2）宽高均大于 750 px 时， 使宽缩小为屏幕宽，高按比例缩小，图片居中，从顶部开始显示
3）宽大于 750 px 而高小于 750 px 时， 使宽缩小为屏幕宽，高按比例缩小，外部用黑色填充，图片居中，从顶部开始显示
4）宽小于 750 px 而高大于 750 px 时，外部用黑色填充，图片居中，从顶部开始显示
3、其他
3.1 加载失败：图片加载失败时显示默认图片或提示
3.2 滑动查看：全屏图片为长图或宽图时，可上下或左右滑动查看
3.3 加载图片：单击缩略图加载全屏图，单击全屏图加载缩略图；加载过程可先加载 80%的清晰度的大图，再加载全部。在加载过程中用进度条提示；加载失败提示
3.4 放大缩小：双击全屏图可放大一倍图片，可上下左右滑动查看图片，放大后再次双击缩小为原全屏图
3.5 其他：图片数量、下载按钮等
网友评论