很久以前有開發過動物影像追蹤系統，對電腦影像處理也略懂略懂。最近需要批次處理圖片，發現 ImageMagick 是個好用的東西，自己處理 BitMap 太累了，呼叫 ImageMagick 就可以快速完成一些簡單的影像處理。目前來說處理簡單的影像還算夠用，如果要再圖片中加入複雜的元素與 Layout，我還是用 PhantomJS 透過 QT WebKit 處理比較快，但是很耗 CPU 倒是真的。
今天要處理的工作很簡單，就是產生一般賣場主要的 Cover 圖片，一般來說都是需要提供正方形的圖片。所有要進行的影像處理流程如下：
- 正規化原始圖檔，包含尺寸與格式，並且置中依最大長寬剪裁為正方形
- 圖片加上圓角，圓角修剪設定為為透背
- 正規化浮水印，將既有的 PNG 透背圖調整為固定尺寸
- 圖片右下角加上浮水印
- 移除圓角的透背效果，背景填上白色，轉成 JPEG 格式
實作方法 (PHP)
本魯要整合 Web 因此直接使用 PHP 呼叫 convert 外部命令處理圖片，convert 是 ImageMagick 提供的影像處理程式之一，還有其他處理 Layout 的程式可以用，功能超多 der，但今天只會介紹 convert 這個最常用的命令。
下面這張是我們預計要處理的「原始圖片」，任務是想辦法在不透過影像處理軟體 (PhotoShop, PhotoImpack...) 來產生商品 Cover 照片。
第一步將圖片進行「正規化原始圖檔，包含尺寸與格式，並且置中依最大長寬剪裁為正方形」
|
1 2 3 4 5 6 7 8 |
<?php // 正規化原始圖檔，包含尺寸與格式，並且置中依最大長寬剪裁為正方形 $rectSize = 900; // 正方形 Size $inputFilePath = $imageFilePath; $outputFilePath = $outputDir . '/resized.png'; $cmd = "convert -thumbnail '{rectSize}x${rectSize}^' -gravity center -extent ${rectSize}x${rectSize} -fill '#FFFFFF00' -opaque none $inputFilePath $outputFilePath"; exec($cmd); |
如果圖片是高的，上下會被剪裁；如果是寬的，左右會被剪裁。最終以正方形 PNG 輸出，Demo 的例子因為原始圖就是正方形，所以除了 Size 感覺不出來有什麼剪裁差異，如下：
第二步「圖片加上圓角，圓角修剪設定為為透背」
|
1 2 3 4 5 6 7 8 |
<?php // 圖片加上圓角，圓角修剪設定為為透背 $roundSize = 30; // 圓角 Size $inputFilePath = $outputFilePath; $outputFilePath = $outputDir . '/resized-round.png'; $cmd = "convert -size {rectSize}x${rectSize} xc:none -fill white -draw 'roundRectangle 0,0 $rectSize,$rectSize $roundSize,$roundSize' $inputFilePath -compose SrcIn -composite $outputFilePath"; exec($cmd); |
結果如下：
第三步「正規化浮水印，將既有的 PNG 透背圖調整為固定尺寸」
|
1 2 3 4 5 6 7 |
<?php // 正規化浮水印，將既有的 PNG 透背圖調整為固定尺寸 $waterHeight = 'x120'; // 浮水印固定高度 x120, 固定寬度 120x $waterMarkInputFilePath = $mainPath . '/water-mark.png'; $waterMarkFilePath = $mainPath . '/water-mark-resize.png'; exec("convert -thumbnail '${waterHeight}' $waterMarkInputFilePath $waterMarkFilePath"); |
預設要加入的浮水印圖片處理後如下 (透背示意)：
第四步「圖片右下角加上浮水印」
|
1 2 3 4 5 6 7 8 |
<?php // 圖片右下角加上浮水印 $pedding = 15; // 右下角與邊緣的距離 $inputFilePath = $outputFilePath; $outputFilePath = $outputDir . '/resized-round-wm.png'; $cmd = "composite -dissolve 100% -gravity SouthEast -geometry +${pedding}+${pedding} $waterMarkFilePath $inputFilePath $outputFilePath"; exec($cmd); |
輸出結果圖片如下：
最後一步「移除圓角的透背效果，背景填上白色，轉成 JPEG 格式」
|
1 2 3 4 5 6 7 |
<?php // 移除圓角的透背效果，背景填上白色，轉成 JPEG 格式 $inputFilePath = $outputFilePath; $outputFilePath = $outputDir . '/result.jpg'; $cmd = "convert $inputFilePath -background white -flatten -alpha off $outputFilePath"; exec($cmd); |
完成 JPEG 格式圖片如下：
完整 PHP 程式碼也可以在 GitHub 取得，需要的人請自行服用。下台一鞠躬.......
