Code Monkey home page Code Monkey logo

ngx_image_thumb's Introduction

Nginx Image 缩略图 模块

模块同时支持 Nginx 和 tengine

  • 本nginx模块主要功能是对请求的图片进行缩略/水印处理,支持文字水印和图片水印。
  • 支持自定义字体,文字大小,水印透明度,水印位置。
  • 判断原图是否是否大于指定尺寸才处理。 ....等等

编译方法

编译前请确认您的系统已经安装了libcurl-dev libgd2-dev libpcre-dev 依赖库

Debian / Ubuntu 系统举例

# 如果你没有安装GCC相关环境才需要执行
$ sudo apt-get install build-essential m4 autoconf automake make 
$ sudo apt-get install libgd2-noxpm-dev libcurl4-openssl-dev libpcre3-dev

CentOS /RedHat / Fedora

# 请确保已经安装了gcc automake autoconf m4 
$ sudo yum install gd-devel pcre-devel libcurl-devel 

FreeBSD / NetBSD / OpenBSD

# 不多说了,自己用port 把libcurl-dev libgd2-dev libpcre-dev 装上吧
# 编译前请确保已经安装gcc automake autoconf m4 

Windows

# 也支持的,不过要修改的代码太多了,包括Nginx本身,用VC++来编译
# 嫌麻烦可以用cygwin来编译。还是不建议你这么做了,用Unix/Linux操作系统吧。

###下载nginx / tengine 源代码

然后下载本模块代码,并放在nginx源代码目录下

选Nginx还是Tengine,您自己看,两者选其一

# 下载Tengine
$ wget http://tengine.taobao.org/download/tengine-1.4.5.tar.gz
$ tar -zxvf tengine-1.4.5.tar.gz
$ cd tengine-1.4.5
# 下载Nginx
$ wget http://nginx.org/download/nginx-1.4.0.tar.gz
$ tar -zxvf nginx-1.4.0.tar.gz
$ cd nginx-1.4.0
$ wget https://github.com/oupula/ngx_image_thumb/archive/master.zip
$ unzip master.zip
$ ./configure --add-module=./nginx-image-master
$ make
$ sudo make install 

配置方法

打开 nginx.conf

vim /etc/nginx/nginx.conf 
# 该路径为默认路径,如果不在此处,自己找一下

location / {
   root html;
   #添加以下配置
   image on;
   image_output on;
}

或者指定目录开启

location /upload {
   root html; 
   image on;
   image_output on;
}

其他参数说明:

image on/off 是否开启缩略图功能,默认关闭

image_backend on/off 是否开启镜像服务,当开启该功能时,请求目录不存在的图片(判断原图),将自动从镜像服务器地址下载原图

image_backend_server 镜像服务器地址

image_output on/off 是否不生成图片而直接处理后输出 默认off

image_jpeg_quality 75 生成JPEG图片的质量 默认值75

image_water on/off 是否开启水印功能

image_water_type 0/1 水印类型 0:图片水印 1:文字水印

image_water_min 300 300 图片宽度 300 高度 300 的情况才添加水印

image_water_pos 0-9 水印位置 默认值9 0为随机位置,1为顶端居左,2为顶端居中,3为顶端居右,4为中部居左,5为中部居中,6为中部居右,7为底端居左,8为底端居中,9为底端居右

image_water_file 水印文件(jpg/png/gif),绝对路径或者相对路径的水印图片

image_water_transparent 水印透明度,默认20

image_water_text 水印文字 "Power By Vampire"

image_water_font_size 水印大小 默认 5

image_water_font 文字水印字体文件路径

image_water_color 水印文字颜色,默认 #000000

调用说明

这里假设你的nginx 访问地址为 http://127.0.0.1/

并在nginx网站根目录存在一个 test.jpg 的图片

通过访问

http://127.0.0.1/test.jpg!c300x200.jpg 将会 生成/输出 test.jpg 300x200 的缩略图

其中 c 是生成图片缩略图的参数, 300 是生成缩略图的 宽度 200 是生成缩略图的 高度

一共可以生成种不同类型的缩略图。

支持 jpeg / png / gif (Gif生成后变成静态图片)

C 参数按请求宽高比例从图片高度 10% 处开始截取图片,然后缩放/放大到指定尺寸( 图片缩略图大小等于请求的宽高

M 参数按请求宽高比例居中截图图片,然后缩放/放大到指定尺寸( 图片缩略图大小等于请求的宽高

T 参数按请求宽高比例按比例缩放/放大到指定尺寸( 图片缩略图大小可能小于请求的宽高 )

W 参数按请求宽高比例缩放/放大到指定尺寸,空白处填充白色背景颜色( 图片缩略图大小等于请求的宽高

调用举例

ngx_image_thumb's People

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

ngx_image_thumb's Issues

配置后,404,未找到图片

2014/02/28 04:04:45 [error] 23284#0: *1 open() "/data0/knose/ppwork/uploads/1_45_65.jpg!c300x200.jpg" failed (2: No such file or directory), client: 192.168.0.117, server: localhost, request: "GET /ppwork/uploads/1_45_65.jpg!c300x200.jpg HTTP/1.1", host: "192.168.0.5:6001"

配置文件
location /uploads {
root /data0/knose;
image on;
image_output on;
}

请求新特性

1:能够设置图片压缩大小格式,例如:20x20,100x100,防止随意生成不同格式图片。
2:图片可能存储fastdfs中,nginx通过http请求下载图片到本地,在压缩,添加水印。
3:可以缓存压缩图片,如果已经压缩过,还重复压缩吗?
我以前通过nginx+lua方式做过:http://www.iteye.com/topic/1125126

访问 404 是啥原因? config 有问题吗? 版本号 nginx-1.12

server
    {
        listen 80 default_server;
        #listen [::]:80 default_server ipv6only=on;
        server_name _;
        index index.html index.htm index.php;
        root  /home/wwwroot/default;

        #error_page   404   /404.html;

        # Deny access to PHP files in specific directory
        #location ~ /(wp-content|uploads|wp-includes|images)/.*\.php$ { deny all; }

        include enable-php.conf;
		
	location / {
		   
		   image on;
		   image_output on;
	}

        location /nginx_status
        {
            stub_status on;
            access_log   off;
        }

        

        location ~ .*\.(js|css)?$
        {
            expires      12h;
        }

        location ~ /.well-known {
            allow all;
        }

        location ~ /\.
        {
            deny all;
        }

        access_log  /home/wwwlogs/access.log;
    }
}

不支持bmp图片文件,不支持的文件打开后没有关闭

static int get_ext_header(char *filename)
{
FILE *handle;
handle = fopen(filename, "rb");
int ret = NGX_IMAGE_NONE; //添加处理,访问格式不存在时关闭打开的文件

if(!handle) {
    return NGX_IMAGE_NONE;
} else {
    unsigned short filetype;//bmp 0x4D42
    if(fread(&filetype, sizeof(unsigned short), 1, handle)) {
        if( filetype == 0xD8FF) {
            ret = NGX_IMAGE_JPEG;
        } else if( filetype == 0x4947) {
            ret = NGX_IMAGE_GIF;
        } else if( filetype == 0x5089) {
            ret = NGX_IMAGE_PNG;
        } else if ( filetype == 0x4d42) {
            ret = NGX_IMAGE_BMP; //添加处理bmp格式
        }

#if 0
else {
ret = NGX_IMAGE_NONE;
}
#endif
}
}
fclose(handle);
return ret;
}

代码中存在gd函数内存泄露

在make_thumb函数中,562行。
需要在562行之前,添加一个语句"gdImageDestroy(info->dst_im);",用来释放make_thumb函数开始的地方分配的内存。

./configure: error: no ./nginx-image-master/config was found

Tengine 2.1.2

./configure --add-module=./nginx-image-master

编译报错

[root@test1 tengine-2.1.2]# ll ./ngx_image_thumb-master/
total 64
-rw-r--r-- 1 root root 704 Aug 17 12:07 config
-rw-r--r-- 1 root root 41871 Aug 17 12:07 ngx_http_image_module.c
-rw-r--r-- 1 root root 4795 Aug 17 12:07 README_EN.md
-rw-r--r-- 1 root root 5013 Aug 17 12:07 README.md

libgd.so.2 error

GNU gdb (GDB) Red Hat Enterprise Linux 7.6.1-94.el7
Copyright (C) 2013 Free Software Foundation, Inc.
License GPLv3+: GNU GPL version 3 or later http://gnu.org/licenses/gpl.html
This is free software: you are free to change and redistribute it.
There is NO WARRANTY, to the extent permitted by law. Type "show copying"
and "show warranty" for details.
This GDB was configured as "x86_64-redhat-linux-gnu".
For bug reporting instructions, please see:
http://www.gnu.org/software/gdb/bugs/...
Reading symbols from /opt/local/nginx/sbin/nginx...done.
[New LWP 168]
[Thread debugging using libthread_db enabled]
Using host libthread_db library "/lib64/libthread_db.so.1".
Core was generated by `nginx: worker process '.
Program terminated with signal 11, Segmentation fault.
#0 0x00007ff2a862a167 in gdImageDestroy () from /lib64/libgd.so.2
Missing separate debuginfos, use: debuginfo-install cyrus-sasl-lib-2.1.26-20.el7_2.x86_64 expat-2.1.0-10.el7_3.x86_64 fontconfig-2.10.95-10.el7.x86_64 freetype-2.4.11-12.el7.x86_64 gd-2.0.35-26.el7.x86_64 glibc-2.17-157.el7_3.1.x86_64 keyutils-libs-1.5.8-3.el7.x86_64 krb5-libs-1.14.1-27.el7_3.x86_64 libX11-1.6.3-3.el7.x86_64 libXau-1.0.8-2.1.el7.x86_64 libXpm-3.5.11-3.el7.x86_64 libcom_err-1.42.9-9.el7.x86_64 libcurl-7.29.0-35.el7.centos.x86_64 libidn-1.28-4.el7.x86_64 libjpeg-turbo-1.2.90-5.el7.x86_64 libpng-1.5.13-7.el7_2.x86_64 libselinux-2.5-6.el7.x86_64 libssh2-1.4.3-10.el7_2.1.x86_64 libxcb-1.11-4.el7.x86_64 nspr-4.11.0-1.el7_2.x86_64 nss-3.21.0-9.el7_2.x86_64 nss-softokn-freebl-3.16.2.3-14.2.el7_2.x86_64 nss-util-3.21.0-2.2.el7_2.x86_64 openldap-2.4.40-9.el7_2.x86_64 openssl-libs-1.0.1e-60.el7_3.1.x86_64 pcre-8.32-15.el7_2.1.x86_64 zlib-1.2.7-17.el7.x86_64
(gdb) bt
#0 0x00007ff2a862a167 in gdImageDestroy () from /lib64/libgd.so.2
#1 0x00000000004a685a in calc_image_info (conf=0x1cb6428) at ngx_image_thumb-master/ngx_http_image_module.c:1057
#2 parse_image_info (conf=0x1cb6428) at ngx_image_thumb-master/ngx_http_image_module.c:934
#3 ngx_http_image_handler (r=0x1cc65d0) at ngx_image_thumb-master/ngx_http_image_module.c:442
#4 0x0000000000448592 in ngx_http_core_content_phase (r=0x1cc65d0, ph=) at src/http/ngx_http_core_module.c:1515
#5 0x00000000004429d3 in ngx_http_core_run_phases (r=r@entry=0x1cc65d0) at src/http/ngx_http_core_module.c:934
#6 0x0000000000442aed in ngx_http_handler (r=r@entry=0x1cc65d0) at src/http/ngx_http_core_module.c:917
#7 0x000000000044f09f in ngx_http_process_request (r=r@entry=0x1cc65d0) at src/http/ngx_http_request.c:1930
#8 0x000000000044f493 in ngx_http_process_request_headers (rev=rev@entry=0x7ff2a231f0e0) at src/http/ngx_http_request.c:1360
#9 0x000000000044f7bc in ngx_http_process_request_line (rev=rev@entry=0x7ff2a231f0e0) at src/http/ngx_http_request.c:1031
#10 0x000000000044fbe9 in ngx_http_wait_request_handler (rev=0x7ff2a231f0e0) at src/http/ngx_http_request.c:500
#11 0x000000000042bee1 in ngx_event_process_posted (cycle=cycle@entry=0x1ca2b70, posted=0x704c10 <ngx_posted_events>) at src/event/ngx_event_posted.c:33
#12 0x000000000042b9cb in ngx_process_events_and_timers (cycle=cycle@entry=0x1ca2b70) at src/event/ngx_event.c:278
#13 0x0000000000433c17 in ngx_worker_process_cycle (cycle=0x1ca2b70, data=) at src/os/unix/ngx_process_cycle.c:862
#14 0x000000000043104c in ngx_spawn_process (cycle=cycle@entry=0x1ca2b70, proc=proc@entry=0x433b1c <ngx_worker_process_cycle>, data=data@entry=0x0,
name=name@entry=0x4ac44e "worker process", respawn=respawn@entry=-4) at src/os/unix/ngx_process.c:198
#15 0x0000000000432d3e in ngx_start_worker_processes (cycle=cycle@entry=0x1ca2b70, n=4, type=type@entry=-4) at src/os/unix/ngx_process_cycle.c:385
#16 0x0000000000434cfe in ngx_master_process_cycle (cycle=cycle@entry=0x1ca2b70) at src/os/unix/ngx_process_cycle.c:260
#17 0x000000000041284e in main (argc=, argv=) at src/core/nginx.c:437
(gdb)

make errors

when I make ,it report this errors
/Users/renshangui/.nginx/ngx_image_thumb/ngx_http_image_module.c:767:30: error:
array index 6 is past the end of the array (which contains 6 elements)
[-Werror,-Warray-bounds]
strcat(info->source_file,buffer[6]);
^ ~
/Applications/Xcode.app/Contents/Developer/Platforms/MacOSX.platform/Developer/SDKs/MacOSX10.10.sdk/usr/include/secure/_string.h:125:33: note:
expanded from macro 'strcat'
__builtin___strcat_chk (dest, src, __darwin_obsz (dest))
^
/Users/renshangui/.nginx/ngx_image_thumb/ngx_http_image_module.c:722:5: note:
array 'buffer' declared here
char buffer[6][255];
^
/Users/renshangui/.nginx/ngx_image_thumb/ngx_http_image_module.c:771:35: error:
array index 6 is past the end of the array (which contains 6 elements)
[-Werror,-Warray-bounds]
strcat(info->request_filename,buffer[6]);
^ ~
/Applications/Xcode.app/Contents/Developer/Platforms/MacOSX.platform/Developer/SDKs/MacOSX10.10.sdk/usr/include/secure/_string.h:125:33: note:
expanded from macro 'strcat'
__builtin___strcat_chk (dest, src, __darwin_obsz (dest))
^
/Users/renshangui/.nginx/ngx_image_thumb/ngx_http_image_module.c:722:5: note:
array 'buffer' declared here
char buffer[6][255];
^
2 errors generated.
make[1]: *** [objs/addon/ngx_image_thumb/ngx_http_image_module.o] Error 1
make: *** [build] Error 2

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.