เนื่องจากระบบที่ผมพัฒนาอยู่มีปัญหาเรื่องการอัพโหลดรูปจากโทรศัพท์มือถือ เพราะรูปจากโทรศัพท์มีขนาดใหญ่มากทำให้ต้องใช้เวลาในการอัพโหลดเกือบ 20 วินาที จึงได้ทำการหาแนวทางในการแก้ปัญหา โดยการลดขนาดภาพให้เล็กลงหลังจากนั้นจะทำการเปลี่ยนรูปแบบการส่งข้อมูลที่ส่งให้เป็นแบบ Base64 ในรูปแบบของ jpeg เนื่องจากว่ามีขนาดเล็กกว่ามาก ทำให้ระยะเวลาในการอัพโหลดลดลงเหลือเพียงประมาณ 1 วินาทีเท่านั้น

ขั้นตอนในการลดขนาดรูป


การลดขนาดรูปนั้นจำเป็นต้องเปลี่ยนแปลงวิธีการส่งข้อมูลจากที่แบบเดิมใช้ Form ในการส่งเป็นการส่งแบบ post body (ajax) นะครับ เนื่องจากว่าเมื่อเราลดขนาดไฟล์รูปนั้น ข้อมูลที่ได้ออกมาจะเป็น Text ในรูปแบบของ Base 64  และเมื่อทำการส่งไปยัง Backend แล้วค่อยแปลงกับเป็นไฟล์ JPG โดยมีขั้นตอนดังนี้

1.สร้างฟังก์ชั่นสำหรับลดขนาดรูปโดยใช้ Canvas

โดยที่ตัวแปล “perferedWidth” คือความกว้างที่ต้องการ (Pixels) ส่วน “image/jpeg คือประเภทของภาพ และ 0.5 คือคุณภาพของรูปภาพหลังการลดขนาด

2.เขียนฟังก์ชันในการอ่านไฟล์รูปภาพและส่งไปย่อขนาด

โดยที่ Parameters ประกอบไปด้วย

“file” : ไฟล์รูปภาพ

“complete” : Callback Function

3.ลองเรียกใช้งานดู

ทั้งหมดนี้เป็นแค่ตัวอย่างที่ทดลองทำนะครับ อาจจะพอใช้เป็นแนวคิดได้บ้าง

หากมีข้อผิดพลาดประการใดก็ขออภัยด้วยนะครับ

 

ขอขอบคุณโค้ดย่อรูปจาก : https://jsfiddle.net/0hmhumL1/


ใส่ความเห็น

อีเมลของคุณจะไม่แสดงให้คนอื่นเห็น ช่องที่ต้องการถูกทำเครื่องหมาย *