
有时候不同的页面需要不同尺寸或者画质的图片来适配不同的比例缩放,需要对图片进行处理。
比如大小缩放以及不同比例裁切等。
B站的图床默认就带了相应的简单处理机制。
格式:(图像原链接)@(\d+[whsepqoc]_?)*(.(|webp|gif|png|jpg|jpeg))?$
w:[1, 9223372036854775807] (width,图像宽度)
h:[1, 9223372036854775807] (height,图像高度)
s:[1, 9223372036854775807] (作用未知)
e:[0,2] (resize,0:保留比例取其小,1:保留比例取其大,2:不保留原比例,不与c混用)
p:[1,1000] (默认100,放大倍数,不与c混用)
q:[1,100] (quality,默认75,图像质量)
o:[0,1] (作用未知)
c:[0,1] (clip,0:默认,1:智能裁切(居中裁切)2:靠左裁切3:靠右裁切)
webp,png,jpeg,gif(不加则保留原格式)
不区分大小写,相同的参数后面覆盖前面
计算后的实际wh不能大于原wh,否则wh参数失效
原图
baseURL/1.jpg
原分辨率,质量压缩
baseURL/1.jpg@1e_1c.jpg
规定宽,高度自适应,质量压缩
baseURL/1.jpg@104w_1e_1c.jpg
规定高,宽度自适应,质量压缩
baseURL/1.jpg@104h_1e_1c.jpg
规定高宽,质量压缩
baseURL/1.jpg@104w_104h_1e_1c.jpg
原分辨率,webp格式(占用最小)
baseURL/1.jpg@104w_104h_1e_1c.webp
规定高度,webp格式(占用最小)
baseURL/1.jpg@104w_104h_1e_1c.webp
比如原神在B站上传视频就喜欢上传三种不同比例的图片:
1146*717(折算为1920x1200,也就是16:10)和1920x1080(16:9)甚至还有1200x900(4:3)
https://i2.hdslb.com/bfs/archive/ff5eb1036ecd8e3778dde3bb48fb3fb1f1ce68cc.jpg
https://i2.hdslb.com/bfs/archive/55dfc907197eda68d8d09ae71cb2c0e8a259ab0d.jpg
https://i0.hdslb.com/bfs/archive/e5ab5d47e0a8ac1ff6ed823324834ef92f8026dc.jpg
很多界面上图片的尺寸是定死的不能乱改,暴力拉伸会导致比例不协调,这时候就可以在后面加上图像参数来保证展示结果的一致性,还不需要前端再做其他处理,拿来即用。
比如都转换成小程序分享常用的5:4的比例@500w_400h_1e_1c
https://i2.hdslb.com/bfs/archive/ff5eb1036ecd8e3778dde3bb48fb3fb1f1ce68cc.jpg@500w_400h_1e_1c
https://i2.hdslb.com/bfs/archive/55dfc907197eda68d8d09ae71cb2c0e8a259ab0d.jpg@500w_400h_1e_1c
https://i0.hdslb.com/bfs/archive/e5ab5d47e0a8ac1ff6ed823324834ef92f8026dc.jpg@500w_400h_1e_1c
是不是非常方便(
本文地址:https://blog.jixiaob.cn/?post=117
版权声明:若无注明,本文皆为“赵苦瓜のBlog~”原创,转载请保留文章出处。