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

更新日期: 2020-09-28 阅读次数: 325 字数: 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 聊聊, 查看更多联系方式。 白天写程序,晚上哄熊孩子,可能回复有点慢,见谅。同时也欢迎关注我的微信公众号“大象工具”: 大象工具微信公众号

相关文章

爱评论不评论

近期节日

2020年10月31日 世界勤俭日
2020年11月01日 万圣节
2020年11月07日 立冬
2020年11月08日 中国记者日
2020年11月10日 世界青年节
2020年11月11日 光棍节
2020年11月14日 世界糖尿病日
2020年11月17日 国际大学生节
2020年11月20日 国际儿童日
2020年11月21日 世界问候日
2020年11月22日 小雪
2020年11月26日 感恩节
查看更多节日