圖片服務器存在的需求是,根據(jù)手機屏幕尺寸以及dpi的不同脯倒,將一些尺寸較大的圖片進行動態(tài)等比例縮放金踪,最終達到不浪費屏幕像素、也不希望圖片糊掉的目的惜姐。
nginx下需要用到的東西:
- http_image_filter模塊犁跪;
- proxy_pass/proxy_store椿息;
預期的使用方法如下:
- 在服務器/webroot/image_resize文件夾下,建立當前項目文件夾(下文以aaa代替)坷衍;
- 在aaa中傳入希望動態(tài)縮放的圖片文件(jpg寝优,png),不要在aaa中傳入文件夾枫耳;
- 將aaa的權限遞歸設置為777;
- 在瀏覽器輸入http://hostname/resizeFile/images/aaa/12.jpg_10x10 , 就會在aaa中生成張將原圖縮放為10x10的圖片乏矾。之后每次訪問該地址,都將得到這張已經生成好的圖片迁杨。
下面是nginx圖片服務器部分的代碼:
location ~ "^(/resizeFile/images)/([\w-]+)/(.*)\.(jpe?g|png)_(\d+)x(\d+)$"{
set $dir $2;
set $width $5;
set $height $6;
set $dimens "_$5x$6";
set $reImage_name "$3$dimens.$4";
set $image_name "$3.$4";
alias /webroot/image_resize/$dir/$reImage_name;
set $image_uri image_resize/$dir/$image_name?width=$width&height=$height;
if (-f $request_filename){
}
if (!-f $request_filename) {
# proxy_pass http://127.0.0.1:80/$image_uri;
proxy_pass http://127.0.0.1/image_resize/$dir/$image_name?width=$width&height=$height;
break;
}
proxy_store /var/market/image_resize/$dir/$reImage_name;
proxy_store_access user:rw group:rw all:r;
proxy_temp_path /var/market/tempFIle;
proxy_set_header Host $host;
}
location ^~ /image_resize/{
#access_log logs/image_resize.log;
image_filter resize $arg_width $arg_height;
image_filter_jpeg_quality 75;
}
注意事項:
- 建議將多數(shù)圖片傳入cdn服務器钻心,圖片服務器的目的是對大尺寸圖片進行縮放,否則會浪費圖片服務器的帶寬铅协;
- 前端在使用時捷沸,建議將原始圖片寬高存入img的data屬性內,然后根據(jù)dpi狐史、屏幕尺寸痒给、頁面縮放比例來確定縮放后的寬和高。
代碼部分參考了[Nginx]使用nginx的image_filter_module來處理圖片预皇。