• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

nginx图片处理笔记(http-image-filter-module、lua)

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

实验环境:CentOS 6.10
目标:1.使用http-image-filter-module进行图片变换;2.使用lua进行格式转换;

  1. 安装EPEL
    https://fedoraproject.org/wiki/EPEL

    yum install https://dl.fedoraproject.org/pub/epel/epel-release-latest-6.noarch.rpm
    # or RHEL/CentOS 7
    # yum install https://dl.fedoraproject.org/pub/epel/epel-release-latest-7.noarch.rpm
    
  2. 由于lua-nginx-module声称(2018-12-06)测试的最新nginx稳定版本是1.12.x(参考:https://github.com/openresty/lua-nginx-module#nginx-compatibility),所以选择安装nginx版本为1.13.6

    curl -O http://nginx.org/download/nginx-1.12.2.tar.gz
    yum install -y gcc g++ gcc-c++ zlib zlib-devel openssl openssl-devel pcre pcre-devel
    yum install -y nginx-1.12.2
    yum install -y libjpeg-turbo-devel libpng-devel freetype-devel libtiff-devel libXpm-devel libwebp-devel fontconfig-devel
    
  3. libimagequant && libgd && add http-image-filter-module
    https://github.com/libgd/libgd
    https://github.com/ImageOptim/libimagequant

    cd libimagequant-2.12.2
    ./configure --prefix=/usr
    make libimagequant.so
    make install
    > install -d /usr/lib
    > install -d /usr/lib/pkgconfig
    > install -d /usr/include
    > install -m 644 libimagequant.a /usr/lib/libimagequant.a
    > install -m 644 libimagequant.so.0 /usr/lib/libimagequant.so.0
    > ln -sf libimagequant.so.0 /usr/lib/libimagequant.so
    > install -m 644 imagequant.pc /usr/lib/pkgconfig/imagequant.pc
    > install -m 644 libimagequant.h /usr/include/libimagequant.h
    #
    cd ../libgd-2.2.5
    ./configure --with-liq=/opt/src/libimagequant-2.12.2
    make
    make install
    gdlib-config --all
    > gdlib-config: warning: this script is deprecated; please use the pkg-config file instead.
    > GD library  2.2.5
    > includedir: /usr/local/include
    > cflags:     -I/usr/local/include
    > ldflags:    
    > libs:       -lm   -lz    -lpng12    -lfreetype    -lfontconfig     -ljpeg   -limagequant -fopenmp  > -lXpm -lX11     -ltiff   -lwebp 
    > libdir:     /usr/local/lib
    > features:   GD_GIF GD_GIFANIM GD_OPENPOLYGON GD_ZLIB GD_PNG GD_FREETYPE GD_FONTCONFIG GD_JPEG GD_LIQ GD_XPM GD_TIFF GD_WEBP
    ln -s /usr/local/lib/libgd.so.3.0.5 /usr/lib64/libgd.so
    ln -s /usr/local/lib/libgd.so.3.0.5 /usr/lib64/libgd.so.3
    ln -s /usr/lib/libimagequant.so.0 /usr/lib64/libimagequant.so.0
    #
    cd nginx-1.12.2
    # 已经安装 yum install -y nginx-1.12.2,所以通过nginx -V获取原编译参数,再加上--with-http_image_filter_module重新编译
    nginx -V
    ./configure --prefix=/etc/nginx --sbin-path=/usr/sbin/nginx --modules-path=/usr/lib64/nginx/modules --conf-path=/etc/nginx/nginx.conf --error-log-path=/var/log/nginx/error.log --http-log-path=/var/log/nginx/access.log --pid-path=/var/run/nginx.pid --lock-path=/var/run/nginx.lock --http-client-body-temp-path=/var/cache/nginx/client_temp --http-proxy-temp-path=/var/cache/nginx/proxy_temp --http-fastcgi-temp-path=/var/cache/nginx/fastcgi_temp --http-uwsgi-temp-path=/var/cache/nginx/uwsgi_temp --http-scgi-temp-path=/var/cache/nginx/scgi_temp --user=nginx --group=nginx --with-compat --with-file-aio --with-threads --with-http_addition_module --with-http_auth_request_module --with-http_dav_module --with-http_flv_module --with-http_gunzip_module --with-http_gzip_static_module --with-http_mp4_module --with-http_random_index_module --with-http_realip_module --with-http_secure_link_module --with-http_slice_module --with-http_ssl_module --with-http_stub_status_module --with-http_sub_module --with-http_v2_module --with-mail --with-mail_ssl_module --with-stream --with-stream_realip_module --with-stream_ssl_module --with-stream_ssl_preread_module --with-cc-opt='-O2 -g -pipe -Wall -Wp,-D_FORTIFY_SOURCE=2 -fexceptions -fstack-protector --param=ssp-buffer-size=4 -m64 -mtune=generic -fPIC' --with-ld-opt='-Wl,-z,relro -Wl,-z,now -pie' --with-http_image_filter_module
    > ...
    > checking for GD library ... found
    > checking for GD WebP support ... found
    > ...
    make
    cd objs
    cp /usr/sbin/nginx /usr/sbin/nginx.old.20181206
    /cp nginx /usr/sbin/nginx -f
    nginx -V
    
  4. 测试nginx

     location ~* ^/img/.*_(\d+)x(\d+)\.(jpg|JPG|gif|GIF|png|PNG)$ {
         set $img_width $1;
         set $img_height $2;
         rewrite ^(.*)_(\d+)x(\d+)\.(jpg|JPG|gif|GIF|png|PNG)$ $1.$4 break;
         image_filter resize $img_width $img_height;
         image_filter_buffer 10M;
     }
    
  5. 测试image_filter是否支持webp

    yum install -y libwebp-tools
    cwebp xxx.jpg -o xxx.webp
    curl -I http://192.168.1.10/img/288822bcfbcbdea89eaa9b84cc42f562_500x500.webp
    
  6. 测试image_filter + proxy_pass

    location ~* ^/oss/(.*)_(\d+)x(\d+)\.(jpg|JPG|jpeg|JPEG|gif|GIF|png|PNG|webp|WEBP)$ {
        set $img_width $2;
        set $img_height $3;
        image_filter resize $img_width $img_height;
        image_filter_buffer 10M;
        resolver 114.114.114.114;
        proxy_pass http://image-demo.oss-cn-hangzhou.aliyuncs.com/$1.$4;
        # 借用oss的示例图片 https://help.aliyun.com/document_detail/44688.html
    }
    
  7. LUAJIT

    # http://luajit.org/download.html
    curl -O http://luajit.org/download/LuaJIT-2.0.5.tar.gz
    tar -zxvf LuaJIT-2.0.5.tar.gz
    cd LuaJIT-2.0.5
    make PREFIX=/usr/local/luajit
    make install PREFIX=/usr/local/luajit
    vi /etc/profile
    >> export LUAJIT_LIB=/usr/local/luajit/lib
    >> export LUAJIT_INC=/usr/local/luajit/include/luajit-2.0
    source /etc/profile
    
  8. ngx_devel_kit (NDK) && lua-nginx-module

    # https://github.com/openresty/lua-nginx-module/releases
    tar -zxvf lua-nginx-module-0.10.13.tar.gz
    # https://github.com/simpl/ngx_devel_kit/releases
    tar -zxvf ngx_devel_kit-0.3.0.tar.gz
    
  9. 编译安装nginx

    ./configure --prefix ...省略... --with-http_image_filter_module --add-module=/opt/src/ngx_devel_kit-0.3.0 --add-module=/opt/src/lua-nginx-module-0.10.13
    make
    cd objs
    cp /usr/sbin/nginx /usr/sbin/nginx.old.20181215
    /bin/cp nginx /usr/sbin/nginx -f
    ln -s /usr/local/luajit/lib/libluajit-5.1.so.2.0.5 /usr/lib64/libluajit-5.1.so.2
    service nginx restart
    # 验证Nginx是否链接了libluajit-5.1.so.2
    ldd /usr/sbin/nginx | grep lua
    
  10. hello,lua

    location /lua_hello {
        default_type 'text/plain';
        content_by_lua 'ngx.say('hello,lua!')';
    }
    location /lua_hello2 {
        default_type 'text/plain';
            content_by_lua_block {
            ngx.say("hello,world!");
            ngx.log(ngx.ERR, "hello");
        }
    }
    
  11. 用lua来做代理

    location ~* ^/lua_capture/(.*)_(\d+)x(\d+)\.(jpg|JPG|jpeg|JPEG|gif|GIF|png|PNG|webp|WEBP)$ {
        default_type 'text/plain';
        content_by_lua_block {
            local proxy_url = "/proxy/" .. ngx.var[1] .. "." .. ngx.var[4]
            ngx.log(ngx.ERR, proxy_url)
            local resp = ngx.location.capture(proxy_url, {
                method = ngx.HTTP_GET,
                args = {q="hello"}
            })
            if not resp then
                ngx.say("request error:", err);
                return
            end
            ngx.log(ngx.ERR, tostring(resp.status))
    
            ngx.status = resp.status
    
            for k, v in pairs(resp.header) do
                if k ~= "Transfer-Encoding" and k ~= "Connection" then
                    ngx.header[k] = v
                end
            end
    
            if resp.body then
                ngx.say(resp.body)
            end
        }
    }  
    
    location ~ ^/proxy/(.*)$ {
        # internal;
        resolver 114.114.114.114;
        proxy_pass http://image-demo.oss-cn-hangzhou.aliyuncs.com/$1;
    }
    
  12. todo: 如何实现实时转webp呢?

参考:

  1. nginx模块 ngx_http_image_filter_module
  2. ngx.location.capture 只支持相对路径,不能用绝对路径
  3. 利用 Aliyun OSS Nginx proxy module 实现OSS 图片处理回写功能
  4. 大型网站高并发解决方案分析之图片服务器分离架构
  5. WebP(整理),比较了WebP和PNG

鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
Nginx添加Lua扩展模块发布时间:2022-07-22
下一篇:
lua连接数据库之luasql ------ luasql连接mysql数据库 及 luasql源码编译 ...发布时间:2022-07-22
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap