使用七牛云动态编辑图片

Posted by jiananshi on 2016-11-01

这篇文章起因是看到女友博客的图片基本都放在七牛云上,先赞下想法,将网站动态(经常变动)和静态文件分离并且放到云服务,好处有诸如减小文件体积、CDN 缓存、HTTP 缓存头设置、容灾和安全性等等,很多工作经验相近的前端都没这个意识(包括我)。

下面想讲的是七牛云除了存储,也可以对资源做动态处理。这里主要用图片处理来举例:

qiniu

这里我们上传了一张 nick 的图片,格式为 jpeg,因为我没有用文件夹来对图片分类,七牛云这里贴心的提供了一个路径前缀(不会产生实际的文件夹)提供给了图片一个 namespace,你可以根据你的业务场景来命名,比如日志可以用日期、博客可以用博客名或 ID 这样子。

qiniu

上传完毕后,我们获得了一个图片的外链,这里你可以通过 https://oiw32lugp.qnssl.com/2016-12-27-171701.jpg 来访问这张图片,so far so good。

假设现在我们面临了一个场景,业务上有如下要求:

  • A. 图片可以伸缩展示
  • B. 同一张图片会在不同的地方展示,并且样式不同
  • C. 小图片我们希望节省用户的流量

这样的场景你一定不陌生,下面我们介绍下如何用七牛云图片处理来完美的解决这些需求

imagemogr2 文档

通常我们对 API 的理解是前端通过 Http 请求获取资源进行进一步操作的系统,不过这里略有不同的是你无需编写任何代码,举个例子:

http://7xv1ia.com1.z0.glb.clouddn.com/2016-12-27-171701.jpg?imageMogr2/thumbnail/150x150!

qiniu

可以看到,nick 被我们强制拉伸为 150x150,整个过程不需要编写任何代码,只要在 URL 中添加相应的参数即可,最终的图片也不仅仅是通过 CSS 来调整的,而是真实的 裁剪/拉伸 为目标尺寸,所以访问同一个资源的不同 size,文件大小也会不同。

再试试:

https://oiw32lugp.qnssl.com/2016-12-27-171701.jpg?imageMogr2/rotate/180

qiniu

现在你了解到七牛云图片处理的强大之处了吧,不仅如此,imagemogr2 还提供等比缩放、高斯模糊等功能,这里不再一一赘述,有兴趣的同学可以自行查阅文档。