当我们在简书中上传一张图片时，以MarkDown编辑器为例，会自动生成图片的url地址。
假设图片链接为：https://img.haomeiwen.com/i9229344/3dd6f0e2d1ad82ec.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240
前半部分：https://img.haomeiwen.com/i9229344/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
预览结果：
发布结果：
可见，尽管在编辑器上能按照代码效果正常显示，但是在发布过程中，后台好像对图片重新做了一个统一处理，使其仍旧按照一开始的上传格式进行显示。
解决办法：
鉴于简书后台 MD 格式与 HTML 格式的转换不透明，除了调整图片大小重新上传，暂时没找到其他有效的办法。
一种快速在线调整图片的方法，不需要另行打开图片处理软件：
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>
radiusx：圆角大小的参数，水平和垂直的值相同
radiusx：圆角水平大小的参数，可以使用像素数（如200）或百分比（如!25p）
radiusx：圆角垂直大小的参数，可以使用像素数（如200）或百分比（如!25p）
网友评论