ปลั๊กอิน Image rescale สำหรับ jQuery

ช่วงนี้มีโอกาสได้ลองทำ plugin มาใช้กับ jQuery หลายตัวครับ Image rescale plugin นี่เป็นตัวหนึ่งครับ จริง ๆ แล้ว rescale image ด้วย jQuery มันไม่ใช่เรื่องใหญ่โต หรือยุ่งยากมากมายอะไร เพียงแค่ว่า ผมอยากได้แบบที่เป็น plugin ครับ และผมหามันไม่เจอ แค่นั้นเองครับ เลยบ้าพลัง เขียนเองซะเลยครับ

หลักการง่าย ๆ กับการทำ rescale กับรูปภาพคือ การคง aspect ratio ของภาพไว้ นั่นคือ ถ้าภาพขนาด 4:3 หมายถึง กว้าง 800 pixels สูง 600 pixels เมื่อย่อลงไปเหลือขนาด กว้าง 200 pixels แล้ว จะต้องได้ความสูง 150 pixels (อัตราส่วนเดิมคือ 4:3 นั่นเอง)

หลังจากนั้น ก็มาถึงสิ่งที่ผมอยากให้ 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)