Monthly Archives: September 2013

Client-side image resizer with HTML canvas

สรุปของสัปดาห์นี้ ได้โจทย์นึงเป็นเรื่อง Resize รูปก่อน Upload ขึ้นเว็บ คล้ายๆ กับ Facebook ที่ย่อรูปก่อนที่จะโพสขึ้น

วิธีการที่ใช้คือ HTML Canvas โดยผ่าน js ชื่อ canvasResize ครับ

canvasResizecanvasResize – Javascript Canvas Resize Plugin. It can work both with jQuery and Zepto. It’s compatible with iOS6 and Android 2.3+

Embedly Powered

via Github

ตามตัวอย่างที่มากับ Source จะพบว่าใช้วิธีสร้าง Form object ลอยๆ ขึ้นมา แล้วแปลงรูปจาก Canvas เป็น BLOB ก่อนจะเอาขึ้น Server ผ่าน AJAX แต่ตอนหยิบมาใช้เองดันส่งยังไงก็ไม่ผ่านซักที ในเมื่อเวลามีน้อยก็แก้ตามวิธีที่พอหาได้เพราะต้องไปปรับ code เก่าในโจทย์ด้วย Continue Reading