zoukankan      html  css  js  c++  java
  • nginx图片处理

     

    前言

    不管一个系统或网站的大与小,都存在相应的图片处理,生成缩略图、为图片加水印等等,如果涉及到APP端,这个图片的处理需求变得更加重要了,因为在目前看来,客户端的屏幕大小不一,会导致以下问题: 
    1、图片过大导致APP加载图片速度慢; 
    2、消耗用户过多流量。


    思路

    1、APP请求图片,并提供需要图片的尺寸信息,nginx经过拦截后,处理并缓存图片。 
    2、当app下次请求同样的图片时,nginx直接取缓存中的图片返回给APP(这个暂不深究)。

    nginx图片处理流程图

    具体实现步骤:

    1、nginx_http_image_filter_module在nginx 0.7.54以后才出现的,用于对JPEG, GIF和PNG图片进行转换处理这个模块默认不被编译,所以要在编译nginx源码的时候,加入相关配置信息(略) 
    2、ngx_http_image_filter_module指令(nginx官网)

    location /img/ {
    proxy_pass http://backend;
    image_filter resize 150 100;
    image_filter rotate 90;
    error_page 415 = /empty;
    }

    location = /empty {
    empty_gif;
    }

    3、http_image_filter_module指令的配置本地nginx

    location ~* (.*.(jpg|gif|png))!(.*)!(.*)$ {
    set $w $3;
    set $h $4;
    rewrite (.*.(jpg|gif|png))!(.*)!(.*)!(.*)$ $1 break;
    image_filter resize $w $h;
    }

    4、运行结果: 
    (1)

     
    (2)

    疑问:这两张图片看上去,怎么看也不是一个正方形? 
    解答:http_image_filter_module模块的image_filter 指令决定了,语法: image_filter (test | size | resize width height | crop width height),这里用到了 resize width height;resize:就是根据设置按比例得到图片; 
    疑问:怎么才能得到设置的真实的大小,比如100x100,就得到一张100x100的图片? 
    解答:进行剪裁,用到的是 crop width height 
    5、配置

    location ~* (.*.(jpg|gif|png))!(.*)!(.*)$ {
    set $w $3;
    set $h $4;
    rewrite (.*.(jpg|gif|png))!(.*)!(.*)!(.*)$ $1 break;
    image_filter resize $w $h;
    image_filter crop $w $h;
    }

    6、运行结果: 
    (1)

    (2)

    7、到此就已经实现了生成缩略图的配置了,如果还需要其他的操作,比如,将图片旋转,就是用rotate就可以了,其他就不做过多的描述。 
    8、配置

    location ~* (.*.(jpg|gif|png))!(.*)!(.*)!(.*)$ {
    set $w $3;
    set $h $4;
    set $rotate $5;
    rewrite (.*.(jpg|gif|png))!(.*)!(.*)!(.*)!(.*)$ $1 break;
    image_filter resize $w $h;
    image_filter crop $w $h;
    image_filter rotate $rotate;
    }
  • 相关阅读:
    Google开源框架盒子模型之Android---<FlexboxLayout>(认知篇)
    Android Studio配置中AndroidAnnotations
    Android Studio分包引发的血案(App启动一直黑屏问题)
    Android Studio打包APK过大问题的研究
    Android WebView JS互调案例
    Eclipse版本android 65535解决方案(原理等同android studio现在的分包方式)
    Android MVP + 泛型,实现了友好VP交互及Activity潜在的内存泄露的优化
    mysql数据监控(db.odbc.select[])
    zabbix 默认消息
    zabbix 利用脚本发邮件(mail)
  • 原文地址:https://www.cnblogs.com/timothy-lai/p/5961463.html
Copyright © 2011-2022 走看看