fbpx

利用 ImageMagick 實現縮圖 + 圓角 + 浮水印 + 背景填色 + 轉檔


很久以前有開發過動物影像追蹤系統,對電腦影像處理也略懂略懂。最近需要批次處理圖片,發現 ImageMagick 是個好用的東西,自己處理 BitMap 太累了,呼叫 ImageMagick 就可以快速完成一些簡單的影像處理。目前來說處理簡單的影像還算夠用,如果要再圖片中加入複雜的元素與 Layout,我還是用 PhantomJS 透過 QT WebKit 處理比較快,但是很耗 CPU 倒是真的。

今天要處理的工作很簡單,就是產生一般賣場主要的 Cover 圖片,一般來說都是需要提供正方形的圖片。所有要進行的影像處理流程如下:

  1. 正規化原始圖檔,包含尺寸與格式,並且置中依最大長寬剪裁為正方形
  2. 圖片加上圓角,圓角修剪設定為為透背
  3. 正規化浮水印,將既有的 PNG 透背圖調整為固定尺寸
  4. 圖片右下角加上浮水印
  5. 移除圓角的透背效果,背景填上白色,轉成 JPEG 格式

實作方法 (PHP)

本魯要整合 Web 因此直接使用 PHP 呼叫 convert 外部命令處理圖片,convert 是 ImageMagick 提供的影像處理程式之一,還有其他處理 Layout 的程式可以用,功能超多 der,但今天只會介紹 convert 這個最常用的命令。

下面這張是我們預計要處理的「原始圖片」,任務是想辦法在不透過影像處理軟體 (PhotoShop, PhotoImpack...) 來產生商品 Cover 照片。

第一步將圖片進行「正規化原始圖檔,包含尺寸與格式,並且置中依最大長寬剪裁為正方形」

如果圖片是高的,上下會被剪裁;如果是寬的,左右會被剪裁。最終以正方形 PNG 輸出,Demo 的例子因為原始圖就是正方形,所以除了 Size 感覺不出來有什麼剪裁差異,如下:

第二步「圖片加上圓角,圓角修剪設定為為透背」

結果如下:

第三步「正規化浮水印,將既有的 PNG 透背圖調整為固定尺寸」

預設要加入的浮水印圖片處理後如下 (透背示意):

第四步「圖片右下角加上浮水印」

輸出結果圖片如下:

最後一步「移除圓角的透背效果,背景填上白色,轉成 JPEG 格式」

完成 JPEG 格式圖片如下:

完整 PHP 程式碼也可以在 GitHub 取得,需要的人請自行服用。下台一鞠躬.......