优化篇-图片动态转图

在前面分别介绍了“移动端”图片上传架构的变迁、后端图片服务的升级，剩下还有图片浏览优化、动态转图要和大家分享，本篇文章先介绍动态转图。

项目背景：2012年年底的时候，移动端的兴起，但图片需求和pc端要求（尺寸、大小、体积）不一样，需要对图片进行重新裁剪，但现有图片量大概是20T，转换实在是一个漫长的流程；当时不断地去参考别人家（云图片存储和处理当时市面上还没有），终于在淘宝（taobao.com）发现一个奇怪的图片链点，图片的尺寸和大小可以根据url中相应位置变量进行相应改变，因为时代已久，参考的具体链点已经找不到。

目标

1.开发在调用图片的时候只需要在url进行参数搭配，就能实现裁剪、放大缩小、打水印等操作。

2.图片不需要预处理，需要动态生成。

架构

1.用户请求图片。

2.Nginx分派：

A.如果本地存储不存在用户请求的图片，则将请求（以URL HASH分派方式）分派给后端IMG-Server。

B.如果本地存储存在用户请求的图片，则直接返回。

3.IMG-Server属于一个自开发的、负责分派的Web端服务后端，主要功能

A.合并用户请求，例如：10个用户同时请求a.jpg，但只发送一次对a.jpg的处理任务到队列中。

B.设置超时时间，默认5秒，如果超5秒没接收到work的完成处理通知，则返回默认图url给Nginx。

4.Queue、Worker：从Queue中获取需要处理的图片任务。

5.Worker：

A.向图片集群服务请求原图资源。

B.调用imagemagick按需进行图片处理。

6.Worker：调用同步系统将处理完的图片推送到nginx前端本地存储中。

7.Worker：通知IMG-Server图片已处理完毕。

8.通过rewrite信息号通知nginx进行重新获取图片。

超时： resp.setHeader( "X-Accel-Redirect" , "/images/mobile/default.jpg" );

按时完成： resp.setHeader( "X-Accel-Redirect" , "" + "/RESULT" + uri);

PS:1.充分利用CDN，减少对Nginx的请求。2.定时删除nginx本地存储图片。

效果

原图

http://img.pconline.com.cn/images/upload/upc/tx/itbbs/1402/13/c10/31233039_1392306126700.jpg

1.imgm : 500*1000 , 65质量

  http://imgm.pconline.com.cn/images/upload/upc/tx/itbbs/1402/13/c10/31233039_1392306126700.jpg

2.img0m|img1m|img2m|img3m : 150*300 , 65质量  http://img0m.pconline.com.cn/pconline/1409/26/5497583_t1_thumb.jpg

3.img*w 默认的用法：400*30000，85质量 ; 支持设定宽和质量 http://imgw.pconline.com.cn/images/upload/upc/tx/itbbs/1402/13/c10/31233039_1392306126700.jpg http://imgw.pconline.com.cn/images/upload/upc/tx/itbbs/1402/13/c10/spcgroup/width_300,qua_90/31233039_1392306126700.jpg

4.img rt 支持等比压缩、裁剪、定高压缩、定宽压缩, 75质量 http://img rt.pconline.com.cn/images/upload/upc/tx/itbbs/1402/13/c10/spcgroup/proportion_300x300,qua_80/31233039_1392306126700.jpg

http://imgrt.pconline.com.cn/images/upload/upc/tx/itbbs/1402/13/c10/spcgroup/center_300x300,qua_80/31233039_1392306126700.jpg

http://imgrt.pconline.com.cn/images/upload/upc/tx/itbbs/1402/13/c10/spcgroup/width_300,qua_80/31233039_1392306126700.jpg

http://imgrt.pconline.com.cn/images/upload/upc/tx/itbbs/1402/13/c10/spcgroup/height_300,qua_80/31233039_1392306126700.jpg  

质量压缩

http://imgrt.pconline.com.cn/images/upload/upc/tx/itbbs/1402/13/c10/spcgroup/qua_80/31233039_1392306126700.jpg

5头像合并

http://imgw.pconline.com.cn/images/upload/spcgroup/face/org_490,result_300,13108954_10x10,11484259_170x10,16010991_330x10.jpg

6.WEBP格式支持 除头像合并功能，其余域名链点后加“.webp”，则转为webp格式

http://imgrt.pconline.com.cn/images/upload/upc/tx/itbbs/1402/13/c10/spcgroup/proportion_300x300,qua_80/31233039_1392306126700.jpg.webp

更多文章请关注微信订阅号：轻量运维