在nginx上擼一個圖片服務器

圖片服務器存在的需求是,根據(jù)手機屏幕尺寸以及dpi的不同脯倒,將一些尺寸較大的圖片進行動態(tài)等比例縮放金踪,最終達到不浪費屏幕像素、也不希望圖片糊掉的目的惜姐。

nginx下需要用到的東西:

  1. http_image_filter模塊犁跪;
  2. proxy_pass/proxy_store椿息;

預期的使用方法如下:

  1. 在服務器/webroot/image_resize文件夾下,建立當前項目文件夾(下文以aaa代替)坷衍;
  2. 在aaa中傳入希望動態(tài)縮放的圖片文件(jpg寝优,png),不要在aaa中傳入文件夾枫耳;
  3. 將aaa的權限遞歸設置為777;
  4. 在瀏覽器輸入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;


                 }

注意事項:

  1. 建議將多數(shù)圖片傳入cdn服務器钻心,圖片服務器的目的是對大尺寸圖片進行縮放,否則會浪費圖片服務器的帶寬铅协;
  2. 前端在使用時捷沸,建議將原始圖片寬高存入img的data屬性內,然后根據(jù)dpi狐史、屏幕尺寸痒给、頁面縮放比例來確定縮放后的寬和高。

代碼部分參考了[Nginx]使用nginx的image_filter_module來處理圖片预皇。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末侈玄,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子吟温,更是在濱河造成了極大的恐慌,老刑警劉巖突颊,帶你破解...
    沈念sama閱讀 211,743評論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件鲁豪,死亡現(xiàn)場離奇詭異,居然都是意外死亡律秃,警方通過查閱死者的電腦和手機爬橡,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,296評論 3 385
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來棒动,“玉大人糙申,你說我怎么就攤上這事〈遥” “怎么了柜裸?”我有些...
    開封第一講書人閱讀 157,285評論 0 348
  • 文/不壞的土叔 我叫張陵,是天一觀的道長粱锐。 經常有香客問我疙挺,道長,這世上最難降的妖魔是什么怜浅? 我笑而不...
    開封第一講書人閱讀 56,485評論 1 283
  • 正文 為了忘掉前任铐然,我火速辦了婚禮蔬崩,結果婚禮上,老公的妹妹穿的比我還像新娘搀暑。我一直安慰自己沥阳,他們只是感情好,可當我...
    茶點故事閱讀 65,581評論 6 386
  • 文/花漫 我一把揭開白布自点。 她就那樣靜靜地躺著沪袭,像睡著了一般。 火紅的嫁衣襯著肌膚如雪樟氢。 梳的紋絲不亂的頭發(fā)上冈绊,一...
    開封第一講書人閱讀 49,821評論 1 290
  • 那天,我揣著相機與錄音埠啃,去河邊找鬼死宣。 笑死,一個胖子當著我的面吹牛碴开,可吹牛的內容都是我干的毅该。 我是一名探鬼主播,決...
    沈念sama閱讀 38,960評論 3 408
  • 文/蒼蘭香墨 我猛地睜開眼潦牛,長吁一口氣:“原來是場噩夢啊……” “哼眶掌!你這毒婦竟也來了?” 一聲冷哼從身側響起巴碗,我...
    開封第一講書人閱讀 37,719評論 0 266
  • 序言:老撾萬榮一對情侶失蹤朴爬,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后橡淆,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體召噩,經...
    沈念sama閱讀 44,186評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 36,516評論 2 327
  • 正文 我和宋清朗相戀三年逸爵,在試婚紗的時候發(fā)現(xiàn)自己被綠了具滴。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 38,650評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡师倔,死狀恐怖构韵,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情趋艘,我是刑警寧澤疲恢,帶...
    沈念sama閱讀 34,329評論 4 330
  • 正文 年R本政府宣布,位于F島的核電站致稀,受9級特大地震影響冈闭,放射性物質發(fā)生泄漏。R本人自食惡果不足惜抖单,卻給世界環(huán)境...
    茶點故事閱讀 39,936評論 3 313
  • 文/蒙蒙 一萎攒、第九天 我趴在偏房一處隱蔽的房頂上張望遇八。 院中可真熱鬧,春花似錦耍休、人聲如沸刃永。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,757評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽斯够。三九已至,卻和暖如春喧锦,著一層夾襖步出監(jiān)牢的瞬間读规,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,991評論 1 266
  • 我被黑心中介騙來泰國打工燃少, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留束亏,地道東北人。 一個月前我還...
    沈念sama閱讀 46,370評論 2 360
  • 正文 我出身青樓阵具,卻偏偏與公主長得像碍遍,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子阳液,可洞房花燭夜當晚...
    茶點故事閱讀 43,527評論 2 349

推薦閱讀更多精彩內容

  • 第一章 Nginx簡介 Nginx是什么 沒有聽過Nginx怕敬?那么一定聽過它的“同行”Apache吧!Ngi...
    JokerW閱讀 32,650評論 24 1,002
  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 171,782評論 25 707
  • Spring Cloud為開發(fā)人員提供了快速構建分布式系統(tǒng)中一些常見模式的工具(例如配置管理帘皿,服務發(fā)現(xiàn)东跪,斷路器,智...
    卡卡羅2017閱讀 134,633評論 18 139
  • 發(fā)現(xiàn) 關注 消息 iOS 第三方庫矮烹、插件越庇、知名博客總結 作者大灰狼的小綿羊哥哥關注 2017.06.26 09:4...
    肇東周閱讀 12,065評論 4 62
  • 今天給文秘專業(yè)的同學們安排了一個任務:每人制定一個這學期的讀書計劃。 如果不加指導奉狈,她們交上來的計劃恐...
    有雨有晴閱讀 854評論 0 5