在前面分别介绍了“移动端”图片上传架构的变迁、后端图片服务的升级,剩下还有图片浏览优化、动态转图要和大家分享,本篇文章先介绍动态转图。
项目背景: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本地存储图片。
效果
原图
1.imgm : 500*1000 , 65质量
2.img0m|img1m|img2m|img3m : 150*300 , 65质量
3.img*w 默认的用法:400*30000,85质量 ; 支持设定宽和质量w.pconline.com.cn/images/upload/upc/tx/itbbs/1402/13/c10/31233039_1392306126700.jpgw.pconline.com.cn/images/upload/upc/tx/itbbs/1402/13/c10/spcgroup/width_300,qua_90/31233039_1392306126700.jpg
4.imgrt 支持等比压缩、裁剪、定高压缩、定宽压缩, 75质量rt.pconline.com.cn/images/upload/upc/tx/itbbs/1402/13/c10/spcgroup/proportion_300x300,qua_80/31233039_1392306126700.jpg
质量压缩
rt.pconline.com.cn/images/upload/upc/tx/itbbs/1402/13/c10/spcgroup/qua_80/31233039_1392306126700.jpg
5头像合并
6.WEBP格式支持 除头像合并功能,其余域名链点后加“.webp”,则转为webp格式
更多文章请关注微信订阅号:轻量运维