一  前言

網頁中有很多圖片，我們經常需要對圖片進行一些基本的加工和處理，常見操作的有裁剪、伸縮、旋轉、加水印、格式轉換等。

本文將使用開源的技術，主要使用 ImageMagick 和 OpenResty，透過編寫少量的 Lua 程式碼和 Nginx 配置檔案修改，來實現一個簡單的圖片處理服務，ImageMagick 處理圖片會略耗資源，因此我們對已經處理過的圖片用Redis做快取，相同的URL請求再次過來時，目標圖片會從 Redis 裡獲取並返回。

二  環境準備

本文所用的環境為滴滴雲 Centos 7.4 版本，在搭建之前可以先準備一臺雲伺服器。

三  開源軟體安裝

3.1 安裝 OpenResty

進 OpenResty 的官網 選擇一個相對穩定的版本下載，我選擇的版本是1.13.6.1。

1） 建立下載目錄

  mkdir   - p   / root / zhangjie / tools

2）下載

  cd   / root / zhangjie / tools

  wget  https : //openresty.org/download/openresty-1.13.6.1.tar.gz

3）解壓

  tar  zxvf  openresty - 1.13.6.1.tar.gz

4）安裝依賴的包

  yum   - y   install  pcre - devel  openssl - devel  gcc  gcc - c ++   curl

5）編譯和安裝

6) 確認安裝成功

a) 啟動和檢查程式

b) Windows下外網IP瀏覽

在瀏覽器裡開啟網址：

  http : //116.85.17.20

顯示如下圖所示的頁面，即表示安裝成功

c) 檢查Lua環境是否裝成功

增加配置：

  vi conf/nginx.conf

  user nobody;

  worker_processes   2 ;

  …

  http {

  }

熱載入配置：

  sbin / nginx   - s   reload

在瀏覽器裡開啟網址：

  http : //116.85.17.20/hello_lua

顯示如下圖所示的頁面，即表示 Lua 支援成功了

3.2 安裝 ImageMagick

1) 安裝 ImageMagick

  yum   - y   install  ImageMagick  ImageMagick - devel

2）確認安裝成功

最後一行 “convert” 命令執行成功，即表示安裝成功。

3.3 獲取 Lua 的 Magick 庫

1）下載 Lua 的 Magick 庫

選用開源的 leafo/magick, github 地址： 。

  cd   / root / zhangjie / tools

  git  clone   https : //github.com/leafo/magick.git

2） 確認庫功能正常

  cd   / root / zhangjie / tools / magick

  cp   / opt / app / openresty / nginx / test / didiyun . png   .

編寫測試用的 Lua 程式 image_convert_test.lua：

執行命令：

  / opt / app / openresty / luajit / bin / luajit  image_convert_test . lua

無報錯並且有 “didiyun_dest.png” 檔案生成，則證明庫功能正常。

注意：

這裡必須用 “/opt/app/openresty/luajit/bin” 目錄下的檢測 luajit，因為後面步驟中 Nginx 用的是此路徑下的 luajit。

3）複製程式到 OpenResty Lua 庫目錄下

  cp   - r   / root / zhangjie / tools / magick / magick   / opt / app / openresty / lualib

這樣 OpenResty 查詢依賴的 Lua 程式會找到。

3.4 安裝 Redis

1）安裝 Redis

  yum   - y   install  redis

2) 修改 Redis 配置檔案

安裝完後，如果要修改 Redis 配置檔案，可以編輯 redis.conf，redis.conf：

  / etc / redis . conf

這裡用預設的配置就行了，不需要修改。

3) 啟動 Redis Server

  systemctl  start   redis . service

4) 啟動 Redis Client

出現以上輸出，即表示 Redis 安裝成功了。

5）設定 Redis 為開機自動啟動

執行：

  systemctl  enable  redis . service

四  編寫程式碼

4.1 準備工作

1）修改 Nginx 日誌等級

為了方便 Lua 除錯輸出看日誌，修改 Nginx 中的日誌等級，在 “nginx.conf” 中，去掉以下行配置前的註釋符 “#”，去掉後為：

  error_log   logs / error . log   info ;

2）建立圖片源資料目錄

圖片源資料目錄：

  mkdir   - p   / opt / app / openresty / nginx / image

複製圖片：

  cp   / opt / app / openresty / nginx / test / didiyun . png   / opt / app / openresty / nginx / image

 

3）建立 Lua 邏輯程式碼目錄

Lua 處理邏輯程式碼目錄：

  mkdir   - p   / opt / app / openresty / nginx / image _ processor

4）增加 Nginx 圖片字尾識別及 Lua 程式呼叫配置

在 nginx.conf 的 server 域增加配置（以 png 和 jpg 兩種格式為例）：

4.2 編碼

1）image_convert.lua 編寫

實現了圖片的裁剪，拉伸縮放和旋轉三種功能。

注意：

a) 程式碼僅為演示版，並未考慮引數注入等安全性問題，真實環境需要檢查URI和Query String傳入每個引數合法性及一些異常處理；

b）例子中僅做了”thumb”處理圖片的快取，”resize”和”rotate”快取開發思路一樣；

c）為了程式碼簡潔Redis並未採用連線池的方式；

d）leafo/magick庫中還有很多功能，可以新增更多程式碼，支援更豐富的圖片處理功能。

2）檢查配置和重啟 Nginx

檢查 Nginx 配置檔案，輸出 “syntax is ok” 表示配置檔案正確：

重啟 Nginx:

  sbin / nginx   - s   reload

4.3 Url 中 Query 引數說明

服務名	引數	引數說明
無	無	不填任何參數列示獲取原圖
thumb	a	動作, 如：”64×64!”, “500×300%2B50%2B120″(即”500×300+50+120″，URL中“+”需要轉義)
resize	w	圖片的目標寬度
	h	圖片的目標高度
rotate	d	圖片旋轉的度數

五  例子

5.1 測試並使用

在瀏覽器先後開啟網址：

   

  ?s=thumb&a=64x64!

  ?s=thumb&a=500x300%2B50%2B120

  ?s=resize&w=800&h=800

  ?s=rotate&d=90

即能看到原圖、裁切、縮放和旋轉的效果。

注意：

若頁面出現報錯，可以看 Nginx 的 error.log 日誌排查和解決。

六  參考資料

參考網址：

http://www.imagemagick.org