当我们在简书中上传一张图片时,以MarkDown编辑器为例,会自动生成图片的url地址。
假设图片链接为:https://upload-images.jianshu.io/upload_images/9229344-3dd6f0e2d1ad82ec.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240
前半部分:https://upload-images.jianshu.io/upload_images/9229344-3dd6f0e2d1ad82ec.jpg
为图片的保存路径;
后半部分:?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240
表示对图片进行了一系列后续处理(调整大小、方向等)。
注意:imageMogr2
,imageView2
为图片处理的两种接口类型,中间使用 ' | ' 符号隔开( ' %7C ' URL解码为 ' | ' ),关于它们的详细说明附后文。
图片预览成功,发布失效问题
我们在两张相同的图片地址后面分别加上以下代码,即对两张图都做了一个缩放操作(长边不超过200px),同时将第二张图旋转180°。
?imageView2/0/w/200
?imageView2/0/w/200%7CimageMogr2/auto-orient/rotate/180
预览结果:
发布结果:
可见,尽管在编辑器上能按照代码效果正常显示,但是在发布过程中,后台好像对图片重新做了一个统一处理,使其仍旧按照一开始的上传格式进行显示。
解决办法:
在线调整图片后重新上传,以谷歌浏览器为例:
1. 在编辑器中使用简书自带的图片处理接口,调整图片;
2. 在预览界面右键点击调整好的图片,选择复制图片;
3. 在编辑界面直接粘贴,会自动上传新的图片;
4. 最后删掉旧的图片;
5. 重新发布,会发现此时图片已经能正常显示。
图片处理接口
此处列举了几个常用接口,更多接口可查看七牛云开发者中心。
- imageView2
图片基本处理,接口格式:
imageView2/<mode>/w/<LongEdge>
/h/<ShortEdge>
...
<mode>
分为以下6种情况:
-
/0/w/<LongEdge>/h/<ShortEdge>
:长边最多为<LongEdge>,短边最多为<ShortEdge>,进行等比缩放,不裁剪 -
/1/w/<Width>/h/<Height>
:宽最少为<Width>,高最少为<Height>,进行等比缩放,居中裁剪 -
/2/w/<Width>/h/<Height>
:宽最多为<Width>,高最多为<Height>,进行等比缩放,不裁剪 -
/3/w/<Width>/h/<Height>
:宽最少为<Width>,高最少为<Height>,进行等比缩放,不裁剪 -
/4/w/<LongEdge>/h/<ShortEdge>
:长边最少为<LongEdge>,短边最少为<ShortEdge>,进行等比缩放,不裁剪 -
/5/w/<LongEdge>/h/<ShortEdge>
:长边最少为<LongEdge>,短边最少为<ShortEdge>,进行等比缩放,居中裁剪
例:?imageView2/0/w/300:保证图片较长的一边不超过300,不指定 h 表示短边自适应
- imageMogr2
图片高级处理,接口格式:
imageMogr2/auto-orient
/thumbnail/<imageSizeGeometry>
/crop/<imageSizeAndOffsetGeometry>
/rotate/<rotateDegree>
/blur/<radius>x<sigma>
...
-
auto-orient
:建议放在首位,根据原图EXIF信息自动旋正,便于后续处理 -
thumbnail
:缩放,缩放操作参数表 -
crop
:裁剪,裁剪操作参数表 -
rotate
:旋转,取值范围为1-360 -
blur
:高斯模糊,radius取值范围为1-50,sigma必须大于0
- roundPic
图片圆角处理,接口格式:
roundPic/radius/<radius>
/radiusx/<radiusx>
/radiusy/<radiusy>
radius
:圆角大小的参数,水平和垂直的值相同
radiusx
:圆角水平大小的参数,可以使用像素数(如200)或百分比(如!25p)
radiusy
:圆角垂直大小的参数,可以使用像素数(如200)或百分比(如!25p)