用 ImageMagick 製作滿版縮圖
在製作網站時，如果為了美觀並且排版好看，通常都會為文章中的圖片作縮圖。
 
而縮圖的做法有簡單的，直接改掉 image tag 中的 width & height。也有複雜的產生另一張等比例縮小的圖。
 
直接改 width & height 的缺點就是圖檔大，載入時間較久，所以做等比例縮小的圖比較好。
等比例縮小的圖也是有講究的。如果只是等比例縮小，卻忽略圖片本身的長寬比的話，反而會把圖片弄變形，或是無法滿版，排版上就比較不好看。
 
所以下面要介紹我用 ImageMagick 作滿版的縮圖，基本上我的做法是：
1. 判斷圖檔的長寬，然後抓較大的那邊先對齊到縮圖的尺寸。
2. 從左上角開始把多餘尺寸外的圖都裁掉。
用說的不如看圖，以下圖來說，尺寸是 950x355
e51169ca1d3434bfaf648327f3f544db.jpg
 
而我們的目標是要做成 326x228.

步驟

  •  950x335 縮圖成 610x228 (取較大的一邊)
  • 從左上角切出 326x228
  • 這樣的縮圖就會是滿版，而且會很好看。
    至於為何抓左上角呢？其實也可以自行計算重中間抓，只是不同的策略而已。
    以下就是程式碼的部分。我是用 php 呼叫外部的 convert (ImageMagick 的執行檔) 製作的。
     
    // 目的地尺寸及檔案
$size = "326x228";
$output_file = "thumb.jpg";
 
list($resizeW, $resizeH) = split("x", $size);
 
// 先抓出圖片的=長寬資訊
@list($width, $height, $type, $attr) = getimagesize( $source_img );
 
// 確認是否有抓到正確的檔案
if($resizeW!=0 && $resizeH!=0)
{
 
    // 找出正確的輸出比例
    $aspect_ratio =  $resizeW / $resizeH;
    $factor = (($width/$height) > $aspect_ratio)?($width/$resizeW):($height/$resizeH);
     
    $newWidth = round($width / $factor);
    $newHeight = round($height / $factor);
     
    $offset_w = round(abs( $newWidth - $resizeW ) / 2);
    $offset_h = round(abs( $newHeight - $resizeH ) / 2);
     
    $offset_w = 0;
    $offset_h = 0;
     
    $cmd = 'convert '.$source_img.' -thumbnail '.$size.'^ -crop '.$size.'+'.$offset_w.'+'.$offset_h.' '.$output_file; 
 
    pclose(popen("$cmd ", 'r'));
}
     
    以上計算方式以及處理檔案位置的部分就靠自己囉，應該並不困難啦！
    希望大家都能提供好看的縮圖喔！
    註：我用的版本是  ImageMagick 6.7.3-2

註解

Facebook 討論區載入中...