<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>jQuery, Ajax, PHP, JSON, XML, Web Technologies &#187; GD</title>
	<atom:link href="http://blog.chonla.com/tag/gd/feed/" rel="self" type="application/rss+xml" />
	<link>http://blog.chonla.com</link>
	<description>คุยกันเรื่อง jQuery, Ajax, PHP, JSON, XML และ Web Technologies เป็นภาษาไทยกันดีกว่า</description>
	<lastBuildDate>Tue, 17 Jan 2012 18:27:02 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.1</generator>
		<item>
		<title>สร้าง Square Thumbnail แบบ Facebook กันเถอะ</title>
		<link>http://blog.chonla.com/2008/12/%e0%b8%aa%e0%b8%a3%e0%b9%89%e0%b8%b2%e0%b8%87-square-thumbnail-%e0%b9%81%e0%b8%9a%e0%b8%9a-facebook-%e0%b8%81%e0%b8%b1%e0%b8%99%e0%b9%80%e0%b8%96%e0%b8%ad%e0%b8%b0/</link>
		<comments>http://blog.chonla.com/2008/12/%e0%b8%aa%e0%b8%a3%e0%b9%89%e0%b8%b2%e0%b8%87-square-thumbnail-%e0%b9%81%e0%b8%9a%e0%b8%9a-facebook-%e0%b8%81%e0%b8%b1%e0%b8%99%e0%b9%80%e0%b8%96%e0%b8%ad%e0%b8%b0/#comments</comments>
		<pubDate>Mon, 01 Dec 2008 11:09:06 +0000</pubDate>
		<dc:creator>chonla</dc:creator>
				<category><![CDATA[function]]></category>
		<category><![CDATA[Image]]></category>
		<category><![CDATA[PHP]]></category>
		<category><![CDATA[Facebook]]></category>
		<category><![CDATA[GD]]></category>
		<category><![CDATA[Thumbnail]]></category>

		<guid isPermaLink="false">http://blog.chonla.com/?p=136</guid>
		<description><![CDATA[งง Thumbnail แบบ Facebook คืออะไร ความจริงแล้วผมก็ไม่อยากอ้างถึง Facebook ซักเท่าไหร่ แต่ก็เป็นเพราะว่า ผมไปเห็นการสร้าง Thumbnail แบบนี้ครั้งแรกที่ Facebook ครับ ดังนั้น ใครจะบอกว่า เฮ้ย ของที่นั่นที่นี่ตะหาก อันนั้นก็แล้วแต่ครับ แค่ผมเห็นที่ Facebook เท่านั้นเองครับ ตามลอจิกของมันก็ไม่ได้ยุ่งยากอะไรครับ แต่จะแตกต่างจากที่เราเคยคิดในเรื่องการสร้าง Thumbnail ทั่ว ๆ ไป คือ ไม่ใช่แค่ย่อรูปลงมา แต่เราจะ Crop เอาเฉพาะส่วนที่ต้องการ ทำให้เราได้ Thumbnail ที่เป็นรูปสี่เหลี่ยมจัตุรัสครับ หลักการง่าย ๆ คือ เราจะย่อลงมาให้ด้านที่สั้นที่สุดให้มีขนาดตามที่ต้องการ หลังจากนั้นก็ทำการ Crop รูปที่เหลือให้เป็นสี่เหลี่ยมจัตุรัสตามขนาดที่เราเลือกเท่านั้นเองครับ ตำแหน่งของการ Crop ที่ผมเลือก คือตรงกึ่งกลางของภาพครับ ด้วยเหตุผลที่ว่า ปกติแล้ว ภาพถ่าย เนื้อหาที่สำคัญจะอยู่บริเวณกลาง ๆ ของภาพครับ ดังนั้นเราก็จะ Crop [...]]]></description>
			<content:encoded><![CDATA[<p>งง Thumbnail แบบ Facebook คืออะไร ความจริงแล้วผมก็ไม่อยากอ้างถึง Facebook ซักเท่าไหร่ แต่ก็เป็นเพราะว่า ผมไปเห็นการสร้าง Thumbnail แบบนี้ครั้งแรกที่ Facebook ครับ ดังนั้น ใครจะบอกว่า เฮ้ย ของที่นั่นที่นี่ตะหาก อันนั้นก็แล้วแต่ครับ แค่ผมเห็นที่ Facebook เท่านั้นเองครับ</p>
<p><span id="more-136"></span></p>
<p>ตามลอจิกของมันก็ไม่ได้ยุ่งยากอะไรครับ แต่จะแตกต่างจากที่เราเคยคิดในเรื่องการสร้าง Thumbnail ทั่ว ๆ ไป คือ ไม่ใช่แค่ย่อรูปลงมา แต่เราจะ Crop เอาเฉพาะส่วนที่ต้องการ ทำให้เราได้ Thumbnail ที่เป็นรูปสี่เหลี่ยมจัตุรัสครับ</p>
<p>หลักการง่าย ๆ คือ เราจะย่อลงมาให้ด้านที่สั้นที่สุดให้มีขนาดตามที่ต้องการ หลังจากนั้นก็ทำการ Crop รูปที่เหลือให้เป็นสี่เหลี่ยมจัตุรัสตามขนาดที่เราเลือกเท่านั้นเองครับ</p>
<p>ตำแหน่งของการ Crop ที่ผมเลือก คือตรงกึ่งกลางของภาพครับ ด้วยเหตุผลที่ว่า ปกติแล้ว ภาพถ่าย เนื้อหาที่สำคัญจะอยู่บริเวณกลาง ๆ ของภาพครับ ดังนั้นเราก็จะ Crop เฉพาะส่วนกลาง ๆ ของภาพมาใช้นั่นเองครับ</p>
<p>เมื่อได้ลอจิกง่าย ๆ ตามนี้แล้ว ก็จะได้ Code ตามนี้ครับ</p>
<pre name="code" class="php">
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 &gt; $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;
}
</pre>
<p>วิธีเรียกใช้งานก็ง่ายดายเหลือเกินครับ แค่</p>
<pre name="code" class="php">
<em>bool</em> create_square_thumb(<em>&lt;ชื่อรูปต้นฉบับ&gt;</em>, <em>&lt;ชื่อรูป Thumbnail ที่ต้องการ&gt;</em>, <em>&lt;ขนาดความกว้างของรูป Thumbnail ที่ต้องการ&gt;</em>);
</pre>
<p>ใครที่สร้างไฟล์ไม่ได้ก็อย่าลืม set permission ของ path ปลายทางให้สามารถ write ได้ด้วยนะครับ (เช่น 777)</p>
<p><a class="a2a_dd a2a_target addtoany_share_save" href="http://www.addtoany.com/share_save#url=http%3A%2F%2Fblog.chonla.com%2F2008%2F12%2F%25e0%25b8%25aa%25e0%25b8%25a3%25e0%25b9%2589%25e0%25b8%25b2%25e0%25b8%2587-square-thumbnail-%25e0%25b9%2581%25e0%25b8%259a%25e0%25b8%259a-facebook-%25e0%25b8%2581%25e0%25b8%25b1%25e0%25b8%2599%25e0%25b9%2580%25e0%25b8%2596%25e0%25b8%25ad%25e0%25b8%25b0%2F&amp;title=%E0%B8%AA%E0%B8%A3%E0%B9%89%E0%B8%B2%E0%B8%87%20Square%20Thumbnail%20%E0%B9%81%E0%B8%9A%E0%B8%9A%20Facebook%20%E0%B8%81%E0%B8%B1%E0%B8%99%E0%B9%80%E0%B8%96%E0%B8%AD%E0%B8%B0" id="wpa2a_2"><img src="http://blog.chonla.com/wp-content/plugins/add-to-any/share_save_171_16.gif" width="171" height="16" alt="Share"/></a></p>]]></content:encoded>
			<wfw:commentRss>http://blog.chonla.com/2008/12/%e0%b8%aa%e0%b8%a3%e0%b9%89%e0%b8%b2%e0%b8%87-square-thumbnail-%e0%b9%81%e0%b8%9a%e0%b8%9a-facebook-%e0%b8%81%e0%b8%b1%e0%b8%99%e0%b9%80%e0%b8%96%e0%b8%ad%e0%b8%b0/feed/</wfw:commentRss>
		<slash:comments>9</slash:comments>
		</item>
	</channel>
</rss>

