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配置实现
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配置
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配置
extension=php_imagick.dll #加载ImageMagick图片处理模块
|
4.5,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