Nginx/Apache图片缩略图技术

• 1，目的
• 2，使用方式
• 3，Nginx + Linux 缩略图实现
  • 3.1，原理
  • 3.2，nginx配置实现
  • 3.3，例子
• 4，Apache + Windows缩略图实现
  • 4.1，环境
  • 4.2，原理
  • 4.3，Apache配置
  • 4.4，PHP配置
  • 4.5，resize.php
  • 4.6，例子
• 5，参考资料

1，目的

为了节省用户下载图片的流量，我们可以在适当的地方使用图片缩略图技术。

2，使用方式

原始图片url

http://xx.xx.xx.xx/xx/xx/abc.jpg

缩略图片url

http://xx.xx.xx.xx/xx/xx/abc.jpg!wxh[.jpg|.png]

最后面的.png|.jpg可选

如果希望width/height按比例缩放，设置为 -

1)，限制图片返回的宽度最大为200

http://xx.xx.xx.xx/xx/xx/abc.jpg!200x-

2)，限制图片返回的高度最大为200

http://xx.xx.xx.xx/xx/xx/abc.jpg!-x200

3)，限制图片返回宽度不超过200，高度不超过300

http://xx.xx.xx.xx/xx/xx/abc.jpg!200x300

3，Nginx + Linux 缩略图实现

3.1，原理

利用nginx image filter模块实时压缩图片

1)，当访问的缩略图不存在，则根据原始图片实时生成对应尺寸的缩略图片，并把缩略图保存到磁盘。（图片缩放时会消耗部分CPU计算）

2)，如果缩略图已经存在，则直接返回磁盘上的缩略图。

特点：支持缩略图写磁盘，不支持水印。

依赖于gd:

# yum install -y gd-devel

3.2，nginx配置实现

nginx-tomcat.conf

location ~ ^/Mobile/jiefang/* {

    root /home/wwwroot/ftp;

    set $width "-";

    set $height "-";

    if ( $uri ~ "/(.{1,}\..+)!([\d|-]+)x([\d|-]+).*" ) {

        set $width  $2;

        set $height $3;

        set $image_path $1;

    }

    set $image_uri thumb_image/$image_path?width=$width&height=$height;

    if (!-f $request_filename) {

        proxy_pass http://127.0.0.1/$image_uri;

        break;

    }

    proxy_store          on; #/home/wwwroot/ftp/$request_filename;  #on表示压缩后的文件保存在与源图片相同目录下。

    proxy_store_access   user:rw  group:rw  all:r;

    #proxy_temp_path      /tmp/images;

    proxy_set_header     Host $host;

    proxy_set_header     Content-Type image/jpeg;

}

location /thumb_image {

    alias /home/wwwroot/ftp;

    image_filter resize $arg_width $arg_height;

    image_filter_jpeg_quality 75;                                   # 压缩质量

    #image_filter_buffer 2m;                                        # 如果原始图片大小起过1m，则会报415错误

    if ( $request_filename ~ "/home/wwwroot/ftp/(.*)" ) {

        error_page 415 = http://$host/$1;                           # 如果出错，则使用原始图片

    }

    allow 127.0.0.0/8;

    deny all;

}

3.3，例子

例子：

http://192.168.85.197/Mobile/jiefang/server/prod/upload/01.jpg                    原图: 805k

http://192.168.85.197/Mobile/jiefang/server/prod/upload/01.jpg!200x-          17k

http://192.168.85.197/Mobile/jiefang/server/prod/upload/02.png                   原图: 698k

http://192.168.85.197/Mobile/jiefang/server/prod/upload/02.png!200x200    79k

http://192.168.85.197/Mobile/jiefang/server/prod/upload/03.jpg                    原图: 300k

http://192.168.85.197/Mobile/jiefang/server/prod/upload/03.jpg!300x-          15k

4，Apache + Windows缩略图实现

4.1，环境

Windows + Apache + PHP + ImageMagick

ImageMagick是一款免费+多平台+性能强劲的图片处理库，处理图片时占用内存低，图片清晰效果好。

4.2，原理

同上3.1，但支持水印

4.3，Apache配置

httpd.conf

LoadModule rewrite_module modules/mod_rewrite.so                                               #开户Apache重写规则模块

LoadModule fcgid_module modules/mod_fcgid.so                                                   #使用fastcgi代理PHP请求

<IfModule mod_fcgid.c>                                                                         #配置php环境

    AddHandler fcgid-script .fcgi .php

    FcgidInitialEnv PHPRC "d:/software/php-5.2.17"

    FcgidInitialEnv PHP_FCGI_MAX_REQUESTS 1000

    FcgidMaxRequestsPerProcess 1000

    FcgidMaxProcesses 5

    FcgidIOTimeout 120

    FcgidIdleTimeout 120

    FcgidWrapper "d:/software/php-5.2.17/php-cgi.exe" .php

    AddType application/x-httpd-php .php

</IfModule>

RewriteEngine on

RewriteCond %{DOCUMENT_ROOT}%{REQUEST_FILENAME} !-f

RewriteRule ^/Mobile/(.+\.(jpg|jpeg|png)![-|\d]+x[-|\d]+).*$ /php/resize.php?file=$1 [L]       #如果client请求图片并且要求对图片缩放，则将请求及参数重写至resize.php

4.4，PHP配置

php.ini

extension=php_imagick.dll                                                                      #加载ImageMagick图片处理模块

4.5，resize.php

resize.php

$w = preg_match('/^\d+$/i', $w) ? intval($w) : 0;

$h = preg_match('/^\d+$/i', $h) ? intval($h) : 0;

if (file_exists($path) == false){ // 如果缩略图不存在，则创建它

    $image = new Imagick($srcPath);

    $len = $image->getImageSize();

    if($len < 1024 * 50){         // 如果原图小于50k，则不缩放

        $path = $srcPath;

    }

    else{

        $real_w = $image->getImageWidth();

        $real_h = $image->getImageHeight();

        // 以下4行代码可以提升性能

        $image->setImageCompression(Imagick::COMPRESSION_JPEG);

        $image->setImageCompressionQuality(75); // 设置图片质量

        $image->stripImage();

        $image->setImageFormat('JPEG');

        $image->thumbnailImage($w, $h);

        $image->writeImages($path, true);

    }

    $image->clear();

    $image->destroy();

}

echo file_get_contents($path);

4.6，例子

我的机器

http://192.168.85.197/Mobile/server/upload/test1.jpg                原图：563k

http://192.168.85.197/Mobile/server/upload/test1.jpg!100x-      8.9k

http://192.168.85.197/Mobile/server/upload/test3.jpg                原图：779k

http://192.168.85.197/Mobile/server/upload/test3.jpg!100x-      8.3k

http://192.168.85.197/Mobile/server/upload/test4.jpg                原图：3.9k

http://192.168.85.197/Mobile/server/upload/test4.jpg!100x-      3.9k (图片小于50k时未缩放，返回原图)

http://192.168.85.197/Mobile/server/upload/test5.png              原图：8.73M

http://192.168.85.197/Mobile/server/upload/test5.png!200x-    8.7k

5，参考资料

http://nginx.org/en/docs/http/ngx_http_image_filter_module.html

http://nginx.org/en/docs/http/ngx_http_proxy_module.html#proxy_store

https://github.com/3078825/ngx_image_thumb

http://www.imagemagick.org/

http://php.net/imagick