950x335 縮圖成 610x228 (取較大的一邊)
在製作網站時,如果為了美觀並且排版好看,通常都會為文章中的圖片作縮圖。
而縮圖的做法有簡單的,直接改掉 image tag 中的 width & height。也有複雜的產生另一張等比例縮小的圖。
直接改 width & height 的缺點就是圖檔大,載入時間較久,所以做等比例縮小的圖比較好。
等比例縮小的圖也是有講究的。如果只是等比例縮小,卻忽略圖片本身的長寬比的話,反而會把圖片弄變形,或是無法滿版,排版上就比較不好看。
所以下面要介紹我用 ImageMagick 作滿版的縮圖,基本上我的做法是:
1. 判斷圖檔的長寬,然後抓較大的那邊先對齊到縮圖的尺寸。
2. 從左上角開始把多餘尺寸外的圖都裁掉。
用說的不如看圖,以下圖來說,尺寸是 950x355
而我們的目標是要做成 326x228.
步驟
1.
2.
從左上角切出 326x228
3.
這樣的縮圖就會是滿版,而且會很好看。
至於為何抓左上角呢?其實也可以自行計算重中間抓,只是不同的策略而已。
以下就是程式碼的部分。我是用 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 討論區載入中...
發表人 :
Kuann Hung
部門 :
老洪的 IT 學習系統
QR Code :