阿里云 OSS 图片缩略图尺寸调整

更新日期: 2020-09-28 阅读次数: 7275 字数: 237 分类: CDN

在微信小程序中使用了阿里云 OSS 来存储图片文件。在需要展示图片列表时,例如瀑布流布局,如果能直接访问缩略图,可以大大减少拉取图片的流量,即节省了流量成本,也加快了渲染速度,用户体验更佳。

之前只用过七牛云的图片存储参数查询,查了一下 OSS 也支持,官方文档地址:

https://help.aliyun.com/document_detail/44688.html

等比缩放

按宽高缩放,例如:

  • 图片缩放为高100 px:resize,h_100
  • 缩放模式为lfit:m_lfit

图片处理的URL为

http://image-demo.oss-cn-hangzhou.aliyuncs.com/example.jpg?x-oss-process=image/resize,h_100,m_lfit

即在后面缀上

?x-oss-process=image/resize,h_100,m_lfit

小程序示例

<image src="{{item.coverImg + '?x-oss-process=image/resize,w_600,m_lfit'}}"
    class="column_pic" mode="widthFix" />

需要优化的地方

以信息流为例

  • 作者头像。因为用户可能上传很大的头像
  • 文章缩略图

VIM Snippet

snippet oss_thumbnail "html_wxml" i
'?x-oss-process=image/resize,w_600,m_lfit'
endsnippet

关于作者 🌱

我是来自山东烟台的一名开发者,有敢兴趣的话题,或者软件开发需求,欢迎加微信 zhongwei 聊聊, 查看更多联系方式