七牛云图片CDN，被你忽略的神级好功能

编者按：［大房说］是七牛云众多用户中的一员，在回顾自己多年项目经历的过程中，他发现越来越多的人已经很依赖云服务所带来的便捷及高效。于是有了“云思路系列”，旨在总结［大房说］在使用云服务过程中得一些经验和教训。

本文转载自［大房说］“云思路系列”第三篇，微信号fangtalk！

 

我们不受雇于任何一家云厂商，仅仅出于对身边项目、产品的一些场景和案例，分享我们的一些经验和观点。我司所有产品，包括我司服务的客户，我们都在推荐用七牛云。当然除了CDN常规功能以外，我们还看中七牛提供的一些对开发非常友好的附加功能：云端的数据处理。例如，我们最常用的图片处理服务。所有用户上传的高清图片，直接上传到七牛云，然后在我们产品的图片元数据库里面仅仅保存一个原图的图片地址。在产品功能的不同模块，直接引用图片地址，外加一些控制图片尺寸、质量以及裁剪模式的数据处理参数：

• 在列表等页面，针对图片地址，加上?imageView2/3/w/200/h/100/q/90，这样，在列表页，会对用户上传的图片，在列表页上按照 宽200px、高100px、质量为原图的90%进行展示；
• 在产品的详情页，针对图片地址，加上?imageView2/2/w/600/q/95，这样，在详情页面，会对用户上传的图片，按照宽最多为600px、高自适应、质量95%进行展示；

 

采用这种方式，相比几年前我们在做视频UGC网站和第一财经网站时，自己做图片的方案设计，哪怕抛开分布式的图片上传和传统CDN的分发，应用程序层面的集成也简单了很多，至少不需要保存对同一图片的多种格式的引用：

• 列表页做好缩略图截图，保存一份地址；
• 详情页，做好尺寸压缩，再保存一份地址；
• 如果以后其他页面或者模块，也需要其他格式和尺寸的图片，我们需要针对所有上传的原图，再需要统统重新生成一份新的尺寸图片。量大的时候要处理非常长的时间才能上线；
• 如果随着产品版本的升级，适配多种屏幕，包括高清、Mobile等等，每次尺寸的变动，都需要开发的支持，对不何要求的图片统统进行一次性的处理；

 

图片这种实时的图片处理服务，是我们抛开传统的CDN而选择“新一代CDN”的一个主要原因。

前几天和一个朋友公司的架构师聊天，聊到了拥抱云所带给我们的一些变化，也顺便聊到了七牛的图片处理。在我聊完我们集成七牛云的方案后，对方的架构师问我，实时的处理，我们发现访问量大的时候，图片加载的有点慢（朋友公司也算是七牛的重度用户，每个月给七牛交很多很多银子），你们没遇到过吗？

我的第一反应是，惊讶。不是说对方质疑云图片慢而惊讶（世上本没有银弹），而是，一年上百万给七牛交银子的团队，竟然在这些基础的数据处理服务之外，没用过七牛的“神级优化”。

给他上一课的同时，我也意识到，看来，很多团队并不认真的看服务商的文档啊。开发人员，往往找到满足自己需求的技术说明，就停止了，集成进来，大功告成。这本身不是我的习惯，在真正开始动手写代码或者做方案之前，我都会通读所有的文档，有一个整体的认识，再说怎么用。这个习惯，也是我可以发现很多好用的用法的终极法宝。

这也是我写文介绍七牛这个服务的原因，一是如果你们没用过这些功能，大家应该去用，如果你不是用的七牛云，你的服务商或许也有类似的功能，天下服务一大抄吗；二呢，鼓励大家多看文档，外加浏览完没有文档的管理页面，看全、思考，再动手，或许这个习惯可以带给你神级开发效率呢。

我们回到前面的问题。实时处理，会慢吗？当然会，虽然七牛进行了缓存，但是，第一次的动态处理，不管是I/O还是CPU，都会有不小的消耗，相比静态文件，自然会慢一点。所以，你可能自然而然的一个想法便是：实时处理完后永久的持久化？但是，这种图片地址[http://7xp4qu.com2.z0.glb.qiniucdn.com/STglr2%2Favatar%2F0.jpg?imageView2/3/w/200/h/100/q/90]怎么做持久化呢？

大家可能觉得，URL里面有了问号，很多浏览器都会当成动态请求，浏览器 或者 客户端缓存的效果没那么好，外加，如果带问号的文件名，显的也很龌龊。那，基于我们多年动态请求伪静态化的经验，可以适用到七牛的动态图片处理方案上来吗？

有了思路，再仔细研究七牛的技术文档，以及七牛的portal，很快就会有方案。

第一步，通过七牛的管理平台，开启数据处理功能：

 

怎么个意思呢？就是说，通过一种变通的方案，可以把图片的URL [http://7xp4qu.com2.z0.glb.qiniucdn.com/STglr2/avatar/0.jpg?imageView2/3/w/200/h/100/q/90]变换成：[http://7xp4qu.com2.z0.glb.qiniucdn.com/STglr2/avatar/0.jpg-thumbnail]，去掉问号，真正伪静态化：

 

有了这个基础，一方面，我们可以不修改我们的程序，就可以对用户访问的图片进行业务调整，例如，今天90%的图片质量，明天我可以调整成99%，而不用修改程序；另一方面，这也是我们可以充分利用七牛云的数据处理，实现真正的静态化的基础。

第二步，修改图片上传的逻辑，增加一个 “上传策略”，告诉七牛云，图片上传完后，帮我做数据处理，然后静态持久化：

简单来说就是，你上传一个图片，之前图片的文件名为 0.jpg，现在呢，上传文件的时候，文件名还是 0.jpg，但是，加一个 persistentOps 参数，告诉七牛云，上传成功后，帮我做一下数据处理：persistentOps=imageView2/2/w/200/h100/q/90|saveas/cWJ1Y2tldDpxa2V5，其中 | 为管道操作，把上传的图片按照“imageView2/2/w/200/h100/q/90”的方式进行处理，然后，保存到空间，并且以“0.jpg-thumbnail”做为文件名，cWJ1Y2tldDpxa2V5 为空间名和文件名拼接在一起base64以后的编码。这样处理以后，任何上传到七牛云的图片，原图保留在你的七牛云图片空间里；在七牛没有完成数据处理之前，用户的对图片的访问 0.jpg-thumbnail 由于在portal上配置了 数据处理 功能，即是没有这个静态图片，七牛会进行动态处理并临时缓存，当七牛的数据处理完成后，数据处理程序会把静态文件0.jpg-thumbnail 保存到七牛图片空间，后续的访问，就是真实的静态文件访问了：

开发效率和访问体验的神级提速！