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

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

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

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

實作方法 (PHP)

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

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

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

<?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 感覺不出來有什麼剪裁差異，如下：

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

<?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 透背圖調整為固定尺寸」

<?php

// 正規化浮水印，將既有的 PNG 透背圖調整為固定尺寸
$waterHeight = 'x120';  // 浮水印固定高度 x120, 固定寬度 120x
$waterMarkInputFilePath = $mainPath . '/water-mark.png';
$waterMarkFilePath = $mainPath . '/water-mark-resize.png';
exec("convert -thumbnail '${waterHeight}' $waterMarkInputFilePath  $waterMarkFilePath");

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

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

<?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 格式」

<?php

// 移除圓角的透背效果，背景填上白色，轉成 JPEG 格式
$inputFilePath = $outputFilePath;
$outputFilePath = $outputDir . '/result.jpg';
$cmd = "convert $inputFilePath -background white -flatten -alpha off $outputFilePath";
exec($cmd);

完成 JPEG 格式圖片如下：

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