zoukankan      html  css  js  c++  java
  • Nginx图片剪裁模块探究 http_image_filter_module

    官方地址:http://nginx.org/en/docs/http/ngx_http_image_filter_module.html

    煮酒品茶:前半部安装和官方说明,后半部分实践

    #yum install -y gd-devel

    Install add http_image_filter_module Module

    #./configure --prefix=/usr/local/nginx_image_filter/ --with-http_image_filter_module

    #make && make install

    use:

    151237823.jpg

    off:关闭模块处理

    test:确保图片是jpeg gif png否则返415错误

    size:输出有关图像的json格式:如下显示

    { "img" : { "width": 100, "height": 100, "type": "gif" } }

    出错显示:

    {}

    rotate 90|180|270:旋转指定度数的图像,参数可以包括变量,单独或一起与resize crop一起使用。

    resize width height:按比例减少图像到指定大小,公减少一个可以另一个用"-"来表示,出错415,参数值可包含变量,可以与rotate一起使用,则两个一起生效。

     

    resize width height:按比例减少图像大小,其它和rotate一样。

    crop width height:按比例减少图像比较大的侧面积和另一侧多余的载翦边缘,其它和rotate一样。没太理解

    #设置读取图像缓冲的最大大小,超过则415错误。

    syntax:image_filter_buffer size;

    default:

    image_filter_buffer 1M;

    context:http, server, location

    #如果启用,最终的图像将被交错。对于JPEG,最终的图像将在“渐进式JPEG”格式。

    syntax:image_filter_interlace on | off;

    default:

    image_filter_interlace off;

    context:http, server, location

    This directive appeared in version 1.3.15.

    #设置变换的JPEG图像的期望质量。可接受的值是从1到100的范围内。较小的值通常意味着既降低图像质量,减少传输数据,推荐的最大值为95。参数值可以包含变量。

    syntax:image_filter_jpeg_quality quality;

    default:

    image_filter_jpeg_quality 75;

    context:http, server, location

    #增加了最终图像的清晰度。锐度百分比可以超过100。零值将禁用锐化。参数值可以包含变量。

    syntax:image_filter_sharpen percent;

    default:

    image_filter_sharpen 0;

    context:http, server, location

    #定义是否应该透明转换的GIF图像或PNG图像与调色板中指定的颜色时,可以保留。透明度的损失将导致更好的图像质量。在PNG的Alpha通道总是保留透明度。

    syntax:image_filter_transparency on|off;

    default:

    image_filter_transparency on;

    context:http, server, location

    image_filter resize width height;

    Json:

    151512434.png

    品茶:这比例不知道具体怎么算的测一测。

    nginx.conf:

    ---------------------------------------------------

           location ~* /image {

                   image_filter resize 200 200;

           }

    ---------------------------------------------------

    测试数据过程:每次重启nginx 和清浏览器缓存并多次刷新

    151258158.jpg

    长>宽

    151315586.jpg

    Test1:

    151626176.jpg

    151626474.jpg

    151626235.jpg

    151626558.jpg

    151626962.jpg

    Test2:

    151720293.jpg

    151720557.jpg

    151720506.jpg

    151720220.jpg

    151720418.jpg



    长<宽

    151330714.jpg

    品茶:那么就容易理解了:

    1、先进么判断长还是宽哪个像素占的多。

    2、长/宽做成一个比例。

    3、如果长占像素多就以长为标准,宽为比例。

    4、如果宽占像素多就以宽为标准,长为比例。

    模拟程序

    1
    2
    3
    4
    5
    6
    7
    l = get(jpg.l)
    w = get(jpg.k)
    g = l / w
    if l > w:
        print nginx.l nginx.l/g
    else:
        print nginx.w*w w

    image_filter rotate 90 | 180 | 270;

    品茶:只能用这三个值,不然nginx启动报错。分别是左转倒转和右转,逆时针的。

    nginx.conf

    ---------------------------------------------------------

           location ~* /image {

                   #image_filter resize 500 500;

                   image_filter rotate 90;

           }

    ---------------------------------------------------------

    逆时针90度 :90

    逆时针180度:180

    逆时针270度:270

    151408588.jpg

    152156543.jpg

    152156544.jpg

    152156432.jpg

    那就明显了。

    resize:图片完整,比例缩小。

    crop:图片不完整,但完全按我们提供的来。

    rotate:旋转图片。

    测试一下test

    test:

    { "img" : { "width": 1920, "height": 1200, "type": "jpeg" } }

    test2:

    { "img" : { "width": 1920, "height": 1080, "type": "jpeg" } }

    test3:

    { "img" : { "width": 354, "height": 586, "type": "png" } }

    输出json格式,可以用来调用。

    image_filter_buffer size;

    我们试试超过1M的文件

    415 Unsupported Media Type

    品茶:这个值看你怎么设了,因为iphone现在拍的原图基本上是4-8M左右

    image_filter_interlace on

    品茶:渐进式jpeg没懂啥意思

    image_filter_jpeg_quality quality; #quality:1-100

    品茶:这个值控制图片的质量,影响清晰度

    nginx.conf

    -----------------------------------------------------------------

           location ~* /image {

                   image_filter_jpeg_quality 20;

                   image_filter resize 500 500;

                   image_filter_buffer 10M;

                   image_filter_interlace on;

                   #image_filter rotate 20;

                   #image_filter crop 200 200;

                   #image_filter size;

                   #image_filter test;

           }

    ------------------------------------------------------------------

     

    152739265.jpg

    152740771.jpg

    152740419.jpg

    152740163.jpg

    151421993.jpg

    品茶:这就是效果

    image_filter_sharpen percent;

    品茶:锐化比

    image_filter_transparency on|off;

    品茶:透明损失度

    品茶:想了一下写几个规则,可能有用。

    比如匹配全站所有的结尾图片

    ----------------------------------------------

           location ~* .(jpg|gif|png)$ {

                   image_filter resize 500 500;

           }

    ----------------------------------------------

    匹配某个目录所有图片

    ----------------------------------------------

           location ~* /image/.*.(jpg|gif|png)$ {

                   image_filter resize 500 500;

           }

    ----------------------------------------------

    再比如用url来指定

    ---------------------------------------------------

           location ~* (.*.(jpg|gif|png))!(.*)!(.*)$ {

                   set $width      $3;

                   set $height     $4;

                   rewrite "(.*.(jpg|gif|png))(.*)$" $1;

           }

           location ~* .*.(jpg|gif|png)$ {

                   image_filter resize $width $height;

           }

    ---------------------------------------------------

    那么效果是:

    170119901.jpg

    170119528.jpg

    170119385.jpg

    170119425.jpg

    品茶:是不是很cool,哈哈,更新完毕了。

  • 相关阅读:
    day 66 crm(3) 自创组件stark界面展示数据
    day 65 crm(2) admin源码解析,以及简单的仿造admin组件
    用 Python+nginx+django 打造在线家庭影院
    django -admin 源码解析
    day 64 crm项目(1) admin组件的初识别以及应用
    云链接 接口不允许 情况 解决方法 mysql Host is not allowed to connect to this MySQL server解决方法
    day 56 linux的安装python3 ,虚拟环境,mysql ,redis
    day55 linux 基础以及系统优化
    Codeforces 989 P循环节01构造 ABCD连通块构造 思维对云遮月参考系坐标轴转换
    Codeforces 990 调和级数路灯贪心暴力 DFS生成树两子树差调水 GCD树连通块暴力
  • 原文地址:https://www.cnblogs.com/itcomputer/p/4933152.html
Copyright © 2011-2022 走看看