巧用七牛图片基本处理 (imageView2)裁剪图片

禾令奇图床一直用的七牛,每次宝宝传图片,尺寸总不符合,还的裁剪第二次。有时候还得单独传图片,甚至我还写了个thumb函数。
今天有空把网站细节优化了下,感觉自在多了,直接传就可以了,裁剪就交给七牛了。以前得每日分享用css处理图片显得不伦不类的,这下好了。

864589819.png

主要用到七牛图片基本处理 (imageView2),这是免费免费免费的(重要的事情说三遍)。

七牛图片基本处理 (imageView2) imageView2 是 imageView 接口的更新版本,实现略有差异,但功能更为丰富。
只需要填写几个参数即可对图片进行缩略操作,生成各种缩略图。imageView2接口可支持处理的原图片格式有psd、jpeg、png、gif、webp、tiff、bmp。

本站主要用的是第1种,裁剪。用法xxx.jpg后加参数。例如https://imgcdn.helingqi.com/images/thumb.png?imageView2/1/w/130

本站主要使用的两种写法:

?imageView2/1/w/130

?imageView2/1/w/550/h/420

以下为接口规格参数:

注意:接口规格不含任何空格与换行符。

imageView2/<mode>/w/<LongEdge>/h/<ShortEdge>

其中 <mode> 分为如下几种情况:

模式说明

/0/w/<LongEdge>/h/<ShortEdge> 限定缩略图的长边最多为<LongEdge>,短边最多为<ShortEdge>,进行等比缩放,不裁剪。如果只指定w 参数则表示限定长边(短边自适应),只指定 h 参数则表示限定短边(长边自适应)。

/1/w/<Width>/h/<Height> 限定缩略图的宽最少为<Width>,高最少为<Height>,进行等比缩放,居中裁剪。转后的缩略图通常恰好是<Width>x<Height> 的大小(有一个边缩放的时候会因为超出矩形框而被裁剪掉多余部分)。如果只指定 w 参数或只指定 h参数,代表限定为长宽相等的正方图。

/2/w/<Width>/h/<Height> 限定缩略图的宽最多为<Width>,高最多为<Height>,进行等比缩放,不裁剪。如果只指定w 参数则表示限定宽(长自适应),只指定 h参数则表示限定长(宽自适应)。它和模式0类似,区别只是限定宽和高,不是限定长边和短边。从应用场景来说,模式0适合移动设备上做缩略图,模式2适合PC上做缩略图。

/3/w/<Width>/h/<Height> 限定缩略图的宽最少为<Width>,高最少为<Height>,进行等比缩放,不裁剪。如果只指定w 参数或只指定 h 参数,代表长宽限定为同样的值。你可以理解为模式1是模式3的结果再做居中裁剪得到的。

/4/w/<LongEdge>/h/<ShortEdge> 限定缩略图的长边最少为<LongEdge>,短边最少为<ShortEdge>,进行等比缩放,不裁剪。如果只指定 w 参数或只指定 h 参数,表示长边短边限定为同样的值。这个模式很适合在手持设备做图片的全屏查看(把这里的长边短边分别设为手机屏幕的分辨率即可),生成的图片尺寸刚好充满整个屏幕(某一个边可能会超出屏幕)。

/5/w/<LongEdge>/h/<ShortEdge> 限定缩略图的长边最少为<LongEdge>,短边最少为<ShortEdge>,进行等比缩放,居中裁剪。如果只指定w 参数或只指定 h 参数,表示长边短边限定为同样的值。同上模式4,但超出限定的矩形部分会被裁剪。


PS:祝大家圣诞快乐。


本站采用「署名 4.0 国际(CC BY 4.0)」创作共享协议,转载请注明本文出处及链接。

Tags: 图片基本处理,七牛图片处理,imageView2,缩略图裁剪

文章翻页

头像
游客
发表评论