มาทำ Thumbnail ง่ายๆ ด้วย TimThumb
หน้าหลัก >> สอนทำเว็บไซต์ >> มาทำ Thumbnail ง่ายๆ ด้วย TimThumb
โดย นายแตงโม เขียนเมื่อ 2/03/2013
สวัสดีครับ วันนี้ผมจะนำทุกๆ ท่านมาให้รู้จักกับ TimThumb กันนะครับ เจ้า TimThumb คือ script php ที่สามารถจะย่อไฟล์ได้โดยที่เราไม่ต้องสร้างไฟล์ใหม่ ยกตัวอย่างเช่น
ปกติเวลาเราจะอัพโหลดรูปภาพ เราต้องแยกเป็น 2 ไฟล์ เพื่อความรวดเร็ว
1. ไฟล์ขนาดเดิมๆที่อัพโหลดรูปเข้ามา
2. ไฟล์ Thumbnail เพื่อความสวยงามและรวดเร็วในการใช้รูปขนาดเล็กมาแสดง
ซึ่งถ้าเราทำแบบนี้เท่ากับว่าเราต้องเขียนสคริปเพื่อเวลาอัพโหลดไฟล์ไปแล้ว ให้สร้างไฟล์รูปแยกเป็น 2 ไฟล์ ไฟล์ปกติและไฟล์ thumbnail ซึ่งผมมองว่าเป็นการสิ้นเปลืองพื้นที่ ไม่สะดวก และที่สำคัญ ถ้าไฟล์ thumbnail ที่เราต้องการมีมากกว่า 1 ขนาด เราก็ต้องไปสร้างเพิ่มอีกหลายๆ ไฟล์ ตามจำนวนทีเราต้องการใช้งาน
แต่!! ถ้าเราใช้เจ้า TimThumb คุณสามารถจะทำ thumbnail ได้เลยง่ายๆ เพียงแค่เรียกใช้งาน Timthumb เท่านั้น
หลักการทำงานของ TimThumb คือ TimThumb จะไปสร้างไฟล์ไว้ในโฟเดอร์ cache ให้เราเองเวลาย่อรูปครับ
เพื่อนๆ สามารถดาวน์โหลด TimThumb ได้ที่นี่เลยครับ
เมื่อดาวน์โหลดเรียบร้อยก็ทำการ unzip ออก จะได้ไฟล์ timthumb.php ให้ทำการอัพโหลดไปบน server นะครับ
อย่างเช่นของเว็บ itangmo ได้อัพไว้ที่ http://www.itangmo.com/thumb.php ** โดยผมได้เปลี่ยนชื่อไฟล์จาก timthumb.php ให้เป็น thumb.php เฉยๆ ใครจะเปลี่ยนหรือไม่เปลี่ยนตามก็ได้ครับ **
มาลองดูวิธีใช้งาน TimThumb กันนะครับ
การเรียกใช้งาน TimThumb คือ http://www.itangmo.com/thumb.php?src= แล้วตามด้วย ไฟล์รูปที่ต้องการย่อรูป
สามารถดูได้ดังตัวอย่างด้านล่างนี้
ภาพขนาดปกติ
ภาพเมื่อเรียกใช้งาน TimThumb
thumb.php?src=uploads/article/f139582724bff293b45d2bfa44d717dc.jpg
เมื่อเรียกใช้งาน TimThumb แบบไม่ได้กำหนดค่าความกว้างหรือความสูง รูปที่ออกมาจะมีขนาด 100px * 100px
ภาพเมื่อเรียกใช้งาน TimThumb และกำหนดความกว้าง = 200px
thumb.php?src=uploads/article/f139582724bff293b45d2bfa44d717dc.jpg&w=200
เมื่อกำหนดความกว้าง =200 แต่ไม่ได้กำหนดความสูง ภาพจะออกมาตามสัดส่วนจริง
ภาพเมื่อเรียกใช้งาน TimThumb และกำหนดความสูง = 200px
thumb.php?src=uploads/article/f139582724bff293b45d2bfa44d717dc.jpg&h=200
เมื่อกำหนดความสูง =200 แต่ไม่ได้กำหนดความกว้าง ภาพจะออกมาตามสัดส่วนจริง
ภาพเมื่อเรียกใช้งาน TimThumb กำหนดความกว้าง = 200px และความสูง = 200px
thumb.php?src=uploads/article/f139582724bff293b45d2bfa44d717dc.jpg&w=200&h=200
เมื่อกำหนดความกว้าง = 200px และ ความสูง = 200px ภาพจะถูก crop เอาตรงกลาง และจัดขนาดให้เป็น 200px * 200px โดยไม่เสียสัดส่วนภาพ
ภาพเมื่อเรียกใช้งาน TimThumb กำหนดความกว้าง = 200px ความสูง = 200px และความละเอียด = 10
thumb.php?src=uploads/article/f139582724bff293b45d2bfa44d717dc.jpg&w=200&h=200&q=10
เมื่อกำหนดความกว้าง = 200px ความสูง = 200px และความละเอียด = 10 ภาพที่ออกมาจะแตก เพระาถูกลดรายละเอียดลง
ภาพเมื่อเรียกใช้งาน TimThumb กำหนดความกว้าง = 200px ความสูง = 200px และความละเอียด = 100
thumb.php?src=uploads/article/f139582724bff293b45d2bfa44d717dc.jpg&w=200&h=200&q=100
เมื่อกำหนดความกว้าง = 200px ความสูง = 200px และความละเอียด = 100 ภาพที่ออกมาจะสวยงาม
** ความละเอียดของภาพสามารถปรับได้ตั้งแต่ 0-100 **
ภาพเมื่อเรียกใช้งาน TimThumb กำหนดความกว้าง = 200px ความสูง = 200px และกำหนดตำแหน่งด้านซ้าย
thumb.php?src=uploads/article/f139582724bff293b45d2bfa44d717dc.jpg&w=200&h=200&a=l
เมื่อกำหนดความกว้าง = 200px ความสูง = 200px และกำหนดตำแหน่งด้านซ้าย ภาพที่ออกมาก็จะโฟกัสไปที่ด้านซ้าย แทนตรงกลางที่เป็นค่ามาตรฐาน
ภาพเมื่อเรียกใช้งาน TimThumb กำหนดความกว้าง = 200px ความสูง = 200px และกำหนดตำแหน่งด้านขวา
thumb.php?src=uploads/article/f139582724bff293b45d2bfa44d717dc.jpg&w=200&h=200&a=r
เมื่อกำหนดความกว้าง = 200px ความสูง = 200px และกำหนดตำแหน่งด้านขวา ภาพที่ออกมาก็จะโฟกัสไปที่ด้านขวา แทนตรงกลางที่เป็นค่ามาตรฐาน
เอาและครับ หวังว่าเพื่อนๆ ทุกคนคงจะได้ความรู้เรื่อง การทำ thumbnail ง่ายๆ ด้วย TimThumb กันไป ไม่มากก็น้อย บทความหน้า จะเป็นเรื่องอะไร ติดตามได้ที่นี่ ไอ้แตงโมดอมคอม ครับผม
แสดงความคิดเห็น