搭建自己的圖片處理服務 — 智慧裁剪、旋轉、佔位一站搞定
前言
前兩天剛搭建了自己的部落格，並寫了一篇介紹性的文章：《極簡部落格搭建，搭建超級簡單又好看》，這幾天準備寫點文章體驗一下這款部落格。發現不論是撰寫文章還是展示效果，都非常符合我的品味，真是太棒了。
直到今天我上傳了一張圖片，於是便有了這篇文章。
因果
一般情況，我寫一篇部落格會直接上傳圖片到文章，有時上傳的尺寸並不太適合在文章內顯示。就有了開啟 PS 或者擷取一部分再上傳，這就放慢了寫博文的速度。我就想有沒有線上處理的方式，這樣就免去了簡單修圖的煩惱。
網上也找到很多現成的介面，不過像我們這種都想把核心技術掌握在自己手上的人來說，這不能滿足我們的慾望。而且可定製性太小，這樣這個解決方案就出爐了！
沒有伺服器？ 來參加阿里雲雙 11 底價團，12 號前 99.5/臺起！
效果預覽
可以實現對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
引數解釋(不關心的不用看，可直接看第 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: (映象內參數，也就是你個程式提供的可配置引數), 設定圖片快取在容器內的/image資料夾內，對應你機子的/data/image
-addr 0.0.0.0:8080:(映象內參數，也就是你個程式提供的可配置引數), 繫結容器內的0.0.0.0ip(也就是所有的 ip)8080埠上。對應你機子上的8080埠，這個視你-p引數而定。
本文章使用的測試圖片地址:
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}部分可以怎麼配置，來達到智慧裁剪、旋轉、佔位等效果。
- 現在你的圖片處理服務已經啟動了。當然圖片每一次載入的時候會有點慢，因為第一次訪問時需要去目標地址把圖片下載到本地，而後通過你的連結提供服務。當然你加了檔案快取後，只要地址不變，你的圖片將會通過本地提供服務，而不會再去遠端下載。聰明的你可能已經嘗試了一些引數來達到你想要的效果了，也可能知道佔位功能如何實現了，那麼下面我們就詳細看下有哪些引數可以配置，能達到怎樣華麗的效果。
引數詳解
- 定寬，高度自適應
{多少畫素}x
例：200x、800x(上面例子就是使用了這個引數)
- 高度的百分之多少，寬度自適應
x{百分比}
例：x0.15(高度的 15%) 、x0.8(高度的 80%)
- 按固定寬高裁剪圖片(這個用來做點點陣圖再好不過了，隨便選張圖，佔位無難度)
{寬度}x{高度}
例：400x300生成 400px * 300px的圖片，自動裁剪
- 正方形圖片(生成頭像的時候很有用)
{數字}
例：96(生成 96*96 的頭像)
- 第二個引數
之前說的都是隻有一個引數，有時你可能需要旋轉一下，或者翻轉一下，傳第二個引數可以達到你想要的效果。翻轉圖片
600,fh這裡的引數表示生成一個600*600且左右翻轉，如果想要水平翻轉，可以使用 fv,或者兩個一起使用，變成600,fv,hv，當然你也可以和前面的1，2，3，4講到的引數配合使用。
旋轉圖片
r90逆時針旋轉90度， 這裡的度數只能是90,180,270其它的不生效。注意：圖片有一個 EXIF 屬性，此屬性是圖片內建的方向屬性，當前服務使用的工具已經自動旋轉成原始的方向了，相關資料可以自己查一下，關鍵字：圖片 EXIF 屬性
圖片質量
q80設定圖片為 80%的質量（預設質量為 95%）圖片質量越小，圖片的大小會更小，可以節省頻寬、提高載入載入圖片的速度。
擷取圖片中的一部分
cx600,cy500,cw300,ch300,100這部分引數就很有意思了，c你可以認為是裁剪，這樣x,y和w,h就組成兩個座標（600，500），（300，300），表示從這張圖片的（600，500）開始，擷取一張300px*300px的圖片, 後面的100是之前第4 點說到的，縮放到正方形，這樣就有了如下的效果。當然這些引數也可以和之前的共用，也沒有順序的關係。
智慧裁剪
sc加入此引數，可以實現智慧裁剪。可以做到圖片感知擴充套件，壓縮擴充套件人臉不變形（人臉感知），不過這個我感覺可以優化一下，試了下效果沒那麼好。
服務命令啟動引數
當前我們使用了
-cache /image -addr 0.0.0.0:8080這兩個啟動引數，在引數介紹裡已經介紹過了，這裡我們來說明一下-cache這個 flag， 現在這個是直接傳了檔案給它，實現了把圖片快取到了本地檔案。這裡還可以快取到以下地方：快取
- 快取到記憶體
-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)- 快取到微軟的世紀互聯
azure URL (例： azure://container-name/)
如果是存到世紀互聯，你需要提供兩個環境變數:
AZURESTORAGE_ACCOUNT_NAME(account name)
AZURESTORAGE_ACCESS_KEY(access key)- 快取到 Redis
redis URL (例：redis://hostname/)
如果 redis 有密碼，需要環境變數
REDIS_PASSWORD服務拉取遠端使用的 referrers
可以通過
-referrers example.com來設定限制圖片拉取的站
-remoteHosts example.com,example1.com設定只從example.com,example1.com獲取圖片，其它的源圖地址將不被服務。這樣可以防止別人惡意使用你的服務。
小結
到這裡，你已經可以為你的部落格或其它提供高定製化的圖片服務了，包括裁剪、旋轉等功能。這樣，很多修圖的工作就可以放到這個服務裡去做。當然，這個服務還有很多小的問題，比如感覺裁剪擴充效果不好，估計作者也在優化。如果長期沒有動作的話，我倒可以寫一個類似功能的，如果有機會，可以在後期的部落格中與大家見面。
還有就是快取的地點基本是國外的服務，像國內的七牛、阿里 OSS、騰訊等雲端儲存沒有接入，這方面都有現在的庫，如果自己使用可以自行接入。
有任何問題歡迎評論討論，也可私信我。
當前服務比較耗資源，如果要布當前服務的話，不要選擇有 cpu 限制的伺服器。
沒有伺服器？ 來參加阿里雲雙 11 底價團，12 號前 99.5/臺起！