前言
文章有點長生均，感覺有用的朋友可以先加收藏。
前兩天剛搭建了自己的博客腥刹，并寫了一篇介紹性的文章：《極簡博客搭建马胧，搭建超級簡單又好看》，這幾天準備寫點文章體驗一下這款博客衔峰。發(fā)現(xiàn)不論是撰寫文章還是展示效果佩脊，都非常符合我的品味蛙粘，真是太棒了。
直到今天我上傳了一張圖片威彰，于是便有了這篇文章出牧。
因果
一般情況，我寫一篇博客會直接上傳圖片到文章抱冷，有時上傳的尺寸并不太適合在文章內顯示崔列。就有了打開 PS 或者截取一部分再上傳，這就放慢了寫博文的速度旺遮。我就想有沒有在線處理的方式赵讯，這樣就免去了簡單修圖的煩惱。
網上也找到很多現(xiàn)成的接口耿眉，不過像我們這種都想把核心技術掌握在自己手上的人來說边翼，這不能滿足我們的欲望。而且可定制性太小鸣剪，這樣這個解決方案就出爐了组底！
效果預覽
可以實現(xiàn)對jpeg筐骇，png债鸡，webp（僅解碼），tiff和gif圖像格式（包括GIF動畫）的裁剪铛纬、旋轉厌均、等操作。更多效果告唆，可快速向下滑動棺弊，查看其它操作的效果圖。
效果預覽
準備
和以往的文章一樣擒悬，本文章也一樣盡力做到通俗易懂模她，使用的命令盡量簡單，讓更多的人可以用上好用的服務懂牧。
主要用到的工具
- Docker
- 開源庫 imageproxy (不需要具體了解侈净，沒有安裝配置等其它操作，寫在這里只是為了讓想 DIY 的朋友知道下核心功能)
啟動服務
- 啟動圖片處理服務
mkdir -p /data/image
docker run --restart always --name image-service -p 8080:8080 -v /data/image:/image -d willnorris/imageproxy -cache /image -addr 0.0.0.0:8080
當然你不想保存圖片到本地的話用狱，可以運行如下命令
docker run --restart always --name image-service -p 8080:8080 -d willnorris/imageproxy -addr 0.0.0.0:8080
參數(shù)解釋(不關心的不用看，可直接看第 3 步)
docker run: 表示運行一個容器拼弃，可以想像成運行一個程序
--restart always：表示程序如果死掉就自動重新啟動夏伊，保證一直提供服務
--name image-service: 給你的程序起個名字，image-service 可以換成任何名字
-v /data/image:/image: 表示把你本地的一個目錄放到程序里面用吻氧，注：這個目錄是容器里面圖片保存的文件夾溺忧，這里這么操作是當你刪除這個容器的時候咏连，你所獲取過的圖片可直接提供服務，不需重新拉取圖片鲁森。注意：如果是 Mac 或者 windows 啟動不了祟滴，需要檢查 /data/目錄 docker 是否有操作的權限
-p 8080:8080: 把容器里的一個端口映射到你的宿主機上（也就是你操作的這臺服務器上，注意：請檢查你的服務器安全組或者防火墻是否對這個端口開放歌溉，否則可能外部無法訪問你的服務)
willnorris/imageproxy: 鏡像名
-cache /image: (鏡像內參數(shù)垄懂，也就是你個程序提供的可配置參數(shù)), 設置圖片緩存在容器內的/image文件夾內，對應你機子的/data/image
-addr 0.0.0.0:8080:(鏡像內參數(shù)痛垛，也就是你個程序提供的可配置參數(shù)), 綁定容器內的0.0.0.0ip(也就是所有的 ip)8080端口上草慧。對應你機子上的8080端口，這個視你-p參數(shù)而定匙头。
本文章使用的測試圖片地址:
http://www.picloud.me/images/2015/03/29/fcfc854b160ef5adb93006a02352b647.jpg
- 到這里你已經啟動了你的服務漫谷，已經可以很好的達到效果了。下面演示一下如何使用：
主要使用方式http://localhost:8080/{options}/{remote_url}解釋：
{options} - 你需要對目錄圖片作的調整
{remote_url} - 原圖地址我的效果
你可以隨意修改當前的{options}在當前URL中就是800x蹂析，可以換成100x舔示，200x,200x300看看具體效果，下面我們來講一下{options}部分可以怎么配置电抚，來達到智能裁剪惕稻、旋轉、占位等效果蝙叛。
- 現(xiàn)在你的圖片處理服務已經啟動了俺祠。當然圖片每一次加載的時候會有點慢，因為第一次訪問時需要去目標地址把圖片下載到本地甥温，而后通過你的鏈接提供服務锻煌。當然你加了文件緩存后妓布，只要地址不變姻蚓，你的圖片將會通過本地提供服務，而不會再去遠端下載匣沼。聰明的你可能已經嘗試了一些參數(shù)來達到你想要的效果了狰挡，也可能知道占位功能如何實現(xiàn)了，那么下面我們就詳細看下有哪些參數(shù)可以配置释涛，能達到怎樣華麗的效果加叁。
參數(shù)詳解
- 定寬，高度自適應
{多少像素}x
例：200x唇撬、800x(上面例子就是使用了這個參數(shù))
- 高度的百分之多少它匕，寬度自適應
x{百分比}
例：x0.15(高度的 15%) 、x0.8(高度的 80%)
- 按固定寬高裁剪圖片(這個用來做點位圖再好不過了窖认，隨便選張圖豫柬，占位無難度)
{寬度}x{高度}
例：400x300生成 400px * 300px的圖片告希，自動裁剪
- 正方形圖片(生成頭像的時候很有用)
{數(shù)字}
例：96(生成 96*96 的頭像)
- 第二個參數(shù)
之前說的都是只有一個參數(shù)，有時你可能需要旋轉一下烧给，或者翻轉一下燕偶，傳第二個參數(shù)可以達到你想要的效果。翻轉圖片
600,fh這里的參數(shù)表示生成一個600*600且左右翻轉础嫡，如果想要水平翻轉指么，可以使用 fv,或者兩個一起使用，變成600,fv,hv榴鼎，當然你也可以和前面的1伯诬，2，3檬贰，4講到的參數(shù)配合使用姑廉。
圖片翻轉旋轉圖片
r90逆時針旋轉90度， 這里的度數(shù)只能是90,180,270其它的不生效翁涤。注意：圖片有一個 EXIF 屬性桥言，此屬性是圖片內置的方向屬性，當前服務使用的工具已經自動旋轉成原始的方向了葵礼，相關資料可以自己查一下号阿，關鍵字：圖片 EXIF 屬性
智能裁剪？圖片質量
q80設置圖片為 80%的質量（默認質量為 95%）圖片質量越小鸳粉，圖片的大小會更小扔涧，可以節(jié)省帶寬、提高加載加載圖片的速度届谈。
圖片質量測試截取圖片中的一部分
cx600,cy500,cw300,ch300,100這部分參數(shù)就很有意思了枯夜，c你可以認為是裁剪，這樣x,y和w,h就組成兩個坐標（600艰山，500）湖雹，（300，300）曙搬，表示從這張圖片的（600摔吏，500）開始，截取一張300px*300px的圖片, 后面的100是之前第4 點說到的纵装，縮放到正方形征讲，這樣就有了如下的效果。當然這些參數(shù)也可以和之前的共用橡娄，也沒有順序的關系诗箍。
截取并生成一張 100 像素的頭像智能裁剪
sc加入此參數(shù)，可以實現(xiàn)智能裁剪挽唉÷俗妫可以做到圖片感知擴展才避，壓縮擴展人臉不變形（人臉感知），不過這個我感覺可以優(yōu)化一下氨距，試了下效果沒那么好桑逝。
image.png
服務命令啟動參數(shù)
當前我們使用了
-cache /image -addr 0.0.0.0:8080這兩個啟動參數(shù)，在參數(shù)介紹里已經介紹過了俏让，這里我們來說明一下-cache這個 flag楞遏， 現(xiàn)在這個是直接傳了文件給它，實現(xiàn)了把圖片緩存到了本地文件首昔。這里還可以緩存到以下地方：緩存
- 緩存到內存
-cache memory:200:4h緩存到內存寡喝，最大內存使用為 200MB, 且最多緩存 4 小時。容量和過期時間可選勒奇，也可以不指定-cache memory预鬓，默認使用100MB內存。- 緩存到亞馬遜存儲
s3 URL (例：s3://region/bucket-name/optional-path-prefix)
3.緩存到 Google 云
gcs URL (例：gcs://bucket-name/optional-path-prefix)- 緩存到微軟的世紀互聯(lián)
azure URL (例： azure://container-name/)
如果是存到世紀互聯(lián)赊颠，你需要提供兩個環(huán)境變量:
AZURESTORAGE_ACCOUNT_NAME(account name)
AZURESTORAGE_ACCESS_KEY(access key)- 緩存到 Redis
redis URL (例：redis://hostname/)
如果 redis 有密碼格二，需要環(huán)境變量
REDIS_PASSWORD服務拉取遠端使用的 referrers
可以通過
-referrers example.com來設置限制圖片拉取的站
-remoteHosts example.com,example1.com設置只從example.com,example1.com獲取圖片，其它的源圖地址將不被服務竣蹦。這樣可以防止別人惡意使用你的服務顶猜。
小結
到這里，你已經可以為你的博客或其它提供高定制化的圖片服務了痘括，包括裁剪长窄、旋轉等功能。這樣纲菌，很多修圖的工作就可以放到這個服務里去做挠日。當然，這個服務還有很多小的問題翰舌，比如感覺裁剪擴充效果不好嚣潜，估計作者也在優(yōu)化。如果長期沒有動作的話灶芝，我倒可以寫一個類似功能的郑原，如果有機會唉韭，可以在后期的博客中與大家見面夜涕。
還有就是緩存的地點基本是國外的服務，像國內的七牛属愤、阿里 OSS女器、騰訊等云存儲沒有接入，這方面都有現(xiàn)在的庫住诸，如果自己使用可以自行接入驾胆。
有任何問題歡迎評論討論涣澡，也可私信我。
當前服務比較耗資源丧诺，如果要布當前服務的話入桂，不要選擇有 cpu 限制的服務器。
還沒有服務器驳阎？快領取一張高額優(yōu)惠券
