สร้าง Square Thumbnail แบบ Facebook กันเถอะ

งง Thumbnail แบบ Facebook คืออะไร ความจริงแล้วผมก็ไม่อยากอ้างถึง Facebook ซักเท่าไหร่ แต่ก็เป็นเพราะว่า ผมไปเห็นการสร้าง Thumbnail แบบนี้ครั้งแรกที่ Facebook ครับ ดังนั้น ใครจะบอกว่า เฮ้ย ของที่นั่นที่นี่ตะหาก อันนั้นก็แล้วแต่ครับ แค่ผมเห็นที่ Facebook เท่านั้นเองครับ

ตามลอจิกของมันก็ไม่ได้ยุ่งยากอะไรครับ แต่จะแตกต่างจากที่เราเคยคิดในเรื่องการสร้าง 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)