优化篇-图片动态转图

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

项目背景：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.jpghttp://imgw.pconline.com.cn/images/upload/upc/tx/itbbs/1402/13/c10/spcgroup/width_300,qua_90/31233039_1392306126700.jpg

4.imgrt 支持等比压缩、裁剪、定高压缩、定宽压缩, 75质量http://imgrt.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

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

优化篇-图片动态转图相关推荐

如何使用12tool二维码合成器将多张二维码图片生成一张动态GIF图？
我们会有以下二维码合成单张GIF图的场景需求: 1.怎样把几张支付宝付款码合成一张动态的二维码图轮流切换然后扫描识别: 2.如何将几张微信名片二维码或者微信付款码.商家码合成一张动态的二维码图片: 3 ...
如何将一连串图片做成动图？怎么把图片做成gif动态图？
平时我们在浏览网页或者APP的时候,经常能看到上面有一些动态的图片,这些动态图片的格式一般都是gif,最简单的gif动图一般就是由几张静态图片合并而成的,这种图其实我们自己也是可以制作的,那么应该怎么 ...
动态GIF图如何制作？如何使用图片合成GIF功能？
因为GIF动态图片的体积小利于传播和保存且搞笑有趣,所以相较于普通的静态图片动态图片更加受欢迎.那么,动态GIF图片是如何制作出来的呢?接下来,给大家分享一款gif图片制作(https://www.g ...
前端优化-网页图片优化
前端在工作中,一定会经常涉及到图片,甚至很多人认为前端就是切图的,还有人说前端是用div+css布局的,如果从事了这项工作,你一定不这么认为,相信大家都知道前端绝对不是用PS切片工具把网页切成小图片这 ...
Web 性能优化：图片优化让网站大小减少 62%
摘要: 压缩各种格式的图片. 原文:Web 性能优化: 图片优化让网站大小减少 62% 作者:前端小智 Fundebug经授权转载,版权归原作者所有. 这是 Web 性能优化的第二篇,上一篇在下面看点 ...
前端每周清单第 34 期：Vue 现状盘点与 3.0 展望，React 代码迁移与优化，图片优化详论
新闻热点国内国外,前端最新动态 Microsoft 宣发面向 iOS 与 Android 平台的 Microsoft Edge:为了保证 Windows 用户各平台使用体验的一致性,Microsof ...
前端每周清单第 34 期：Vue 现状盘点与 3.0 展望，React 代码迁移与优化，图片优化详论... 1
前端每周清单第 34 期:Vue 现状盘点与 3.0 展望,React 代码迁移与优化,图片优化详论作者:王下邀月熊编辑:徐川前端每周清单专注前端领域内容,以对外文资料的搜集为主,帮助开发者了解 ...
struts启动时加载_iOS优化篇之App启动时间优化
原文:橘子不酸丶http://www.zyiner.com/article/5 前言最近由于体验感觉我们的app启动时间过长,因此做了APP的启动优化.本次优化主要从三个方面来做了启动时间的优化,m ...
图网络究竟在研究什么？从15篇研究综述看图神经网络GNN的最新研究进展
近年来,由于图结构的强大表现力,用机器学习方法分析图的研究越来越受到重视.图神经网络(GNN)是一类基于深度学习的处理图域信息的方法. 到目前,相关研究的已经非常多了,不过我们回过头来看思考和回顾一下 ...

优化篇-图片动态转图

优化篇-图片动态转图相关推荐

最新文章

热门文章