จะเห็นได้ว่า มันก็ไม่เห็นมีอะไรพิเศษ ก็เป็นเว็บที่มีรูป smiley ธรรมดา แต่ถ้าลอง view source ดู จะเห็นครับ ว่ามันพิเศษยังไง

ใช่แล้วครับ ทริกของมันก็คือ เราทำการระบุ content-type และเนื้อของไฟล์ลงไปตรง ๆ ในนั้นเลยครับ รูปแบบการเขียนคือ

หลังจากนั้น ก็มาถึงสิ่งที่ผมอยากให้ plugin ตัวนี้มี นั่นก็คือ การกำหนดความกว้าง หรือความสูงสูงสุด นั่นคือ ถ้าผมกำหนดให้ความกว้างที่มากที่สุดมีค่าเป็น 200 pixels และภาพต้นฉบับมีความกว้างเป็น 1024 pixels ภาพที่ย่อแล้ว จะเหลือความกว้างเป็น 200 pixels นั่นเอง

รูปแบบการใช้งาน

$.imgrescale(options);

โดยที่ options ในตอนนี้มีแค่ตัวเดียวครับ คือ maxsize ดังนั้นถ้าต้องการกำหนดค่า maxsize ก็จะเรียกแบบนี้ครับ

$.imgrescale({maxsize:200});

ลองดูตัวอย่างที่ LIVE DEMO ได้เลยครับ

สำหรับ source code ที่เป็น minified ก็ดาวน์โหลดได้จากที่นี่เลยครับ

ใช้ดีอย่าลืม feedback แล้วบอกต่อนะครับ

อ้างอิง

• Aspect Ratio: http://en.wikipedia.org/wiki/Aspect_ratio_(image)

ตามลอจิกของมันก็ไม่ได้ยุ่งยากอะไรครับ แต่จะแตกต่างจากที่เราเคยคิดในเรื่องการสร้าง Thumbnail ทั่ว ๆ ไป คือ ไม่ใช่แค่ย่อรูปลงมา แต่เราจะ Crop เอาเฉพาะส่วนที่ต้องการ ทำให้เราได้ Thumbnail ที่เป็นรูปสี่เหลี่ยมจัตุรัสครับ

หลักการง่าย ๆ คือ เราจะย่อลงมาให้ด้านที่สั้นที่สุดให้มีขนาดตามที่ต้องการ หลังจากนั้นก็ทำการ Crop รูปที่เหลือให้เป็นสี่เหลี่ยมจัตุรัสตามขนาดที่เราเลือกเท่านั้นเองครับ

ตำแหน่งของการ Crop ที่ผมเลือก คือตรงกึ่งกลางของภาพครับ ด้วยเหตุผลที่ว่า ปกติแล้ว ภาพถ่าย เนื้อหาที่สำคัญจะอยู่บริเวณกลาง ๆ ของภาพครับ ดังนั้นเราก็จะ Crop เฉพาะส่วนกลาง ๆ ของภาพมาใช้นั่นเองครับ

เมื่อได้ลอจิกง่าย ๆ ตามนี้แล้ว ก็จะได้ Code ตามนี้ครับ

function create_square_thumb($srcimg, $thumbimg, $size)
{
$src = imagecreatefromjpeg($srcimg);
if (!$src) return FALSE;

list($w, $h) = getimagesize($srcimg);
$nw = 0;
$nh = 0;
$sx = 0;
$sy = 0;
if ($w > $h)
{
$nh = $size;
$nw = $size * $w / $h;
$sx = ($w - $h) / 2;
$ss = $h;
}
else
{
$nw = $size;
$nh = $size * $h / $w;
$sy = ($h - $w) / 2;
$ss = $w;
}

$tmp = imagecreatetruecolor($size, $size);
if (!$tmp) return FALSE;

if (imagecopyresampled($tmp, $src, 0, 0, $sx, $sy, $size, $size, $ss, $ss))
return imagejpeg($tmp, $thumbimg, 100);
return FALSE;
}

วิธีเรียกใช้งานก็ง่ายดายเหลือเกินครับ แค่

bool create_square_thumb(<ชื่อรูปต้นฉบับ>, <ชื่อรูป Thumbnail ที่ต้องการ>, <ขนาดความกว้างของรูป Thumbnail ที่ต้องการ>);

ใครที่สร้างไฟล์ไม่ได้ก็อย่าลืม set permission ของ path ปลายทางให้สามารถ write ได้ด้วยนะครับ (เช่น 777)