Hb7niuImageEditOnline

七牛云在线处理图片指南

用七牛云存储的图片可直接在线编辑：在图片 URL 后加上相应参数，即可缩放、裁剪图片，或获取图片格式、大小、色彩模型信息，非常方便。

团队图片基本存在七牛云，特整理一组常用编辑参数，以便各伙伴使用：

• 常用参数
  • 图片编辑
  • 编辑技巧
• 安人团队文章插图编辑规约
  • 若为 jpg 图片
  • 若为 png 图片
• CHANGELOG

常用参数

图片编辑

nnn为数字变量，大小自定

• 限制图片宽度：?imageView2/2/w/nnn

• 限制图片大小（仅对 jpg 格式有效）： ?imageMogr2/size-limit/nnnk!

• 图片瘦身（在尽可能不影响画质的情况下，将JPEG、PNG格式的图片实时压缩，大幅缩小文件体积）：imageslim

• 设置图片圆角：?roundPic/radius/nnn 比如：http://pics.ibrainbaby.cn/o_90.jpg?imageView2/2/w/1000|imageslim|roundPic/radius/50

  

编辑技巧

• 如果图片要连接各种参数，先加 ? ，各参数之间加 | ，比如上述的：http://pics.ibrainbaby.cn/o_90.jpg?imageView2/2/w/1000|imageslim|roundPic/radius/50
• 加上参数 |imageInfo 即可在线查看图片信息，随时调整，不必下载查看
  • 用法：在图片下载 URL 后附加 |imageInfo 指示符（区分大小写），即可获取 JSON 格式的图片基本信息，包括图片大小、长宽等
  • 示例：
    • 在浏览器输入 http://pics.ibrainbaby.cn/o_90.jpg?imageView2/2/w/1000|imageslim|imageInfo
    • 返回：{"size":27719,"format":"jpeg","width":1000,"height":667,"colorModel":"ycbcr"}
• 建议把下述 3 个常用参数设为输入法常用短语，以便直接调用：怎样使用自定义短语？ - 搜狗输入法 。

更多参数使用可见 图片高级处理 - 七牛开发者中心。

安人团队文章插图编辑规约

为方便用户浏览、团队未来迁移他用，约定在 App 、公众号等处正文插图需满足以下限制：

• 图片大小： ≤ 100k
• 图片宽度： ≥ 750px

在线编辑常用处理机制如下：

若为 jpg 图片

若为 jpg 图片，先在本地查看判断其大小：

• 若 ≥ 2M：限制宽度+瘦身，此时请勿同时限制大小
  • 参数：?imageView2/2/w/1000|imageslim
  • 示例：
    • 原图 http://pics.ibrainbaby.cn/o_90.jpg ，此时图片质量为 {"size":4451551,"format":"jpeg","width":5464,"height":3643,"colorModel":"ycbcr","orientation":"Top-left"}
    • 改后 http://pics.ibrainbaby.cn/o_90.jpg?imageView2/2/w/1000|imageslim ，此时图片质量为 {"size":27719,"format":"jpeg","width":1000,"height":667,"colorModel":"ycbcr"}
• 若 < 2M：直接限制大小在 100k 以内即可
  • 参数：?imageMogr2/size-limit/100k!
  • 示例：
    • 原图：http://ageibrain.ibraintv.com/share/family14-banner.jpg ，此时图片质量为 {"size":154404,"format":"jpeg","width":1920,"height":1451,"colorModel":"ycbcr"}
    • 改后 http://ageibrain.ibraintv.com/share/family14-banner.jpg?imageMogr2/size-limit/100k! ，此时图片质量为 {"size":98113,"format":"jpeg","width":1920,"height":1451,"colorModel":"ycbcr"}

若为 png 图片

若为 png 图片，则限制宽度（建议设为 1000）+转换图片为 jpg 格式+限制大小：

• 参数：?imageView2/2/w/1000/format/jpg|imageMogr2/size-limit/100k!
• 示例：
  • 原图：http://ageibrain.ibraintv.com/share/course_psycontrol_ch3.png ，此时图片质量为 {"size":2014088,"format":"png","width":2556,"height":1432,"colorModel":"nrgba"}
  • 改后 http://ageibrain.ibraintv.com/share/course_psycontrol_ch3.png?imageView2/2/w/1000/format/jpg|imageMogr2/size-limit/100k! ，此时图片质量为 {"size":50513,"format":"jpeg","width":1000,"height":560,"colorModel":"ycbcr"}

CHANGELOG

• 180322 闪闪增加输入法常用短语编辑技巧
• 180316 闪闪创建