ถ่ายรูปด้วยแฟลชแล้วบันทึกเป็น JPG ใครก็ทำได้

จากไตเติ้ลแล้ว คาดว่า เพื่อนๆน้องๆ ที่ได้มาอ่านคงจะมี 2 กลุ่ม คือกลุ่มที่ไม่รู้ว่าทำยังไง กับกลุ่มที่ทำเป็นแล้ว
กับการบันทึกหน้าจอของแฟลช ไปเป็นไฟล์ JPG แน่นอนครับ ไม่ว่าจะกลุ่มไหน ผมรับรองว่าเรื่องนี้ต้องได้ประโยชน์แน่ งั้นมาเริ่มที่ เราจะมาทำอะไรกัน สำหรับมือใหม่ก่อน

เราจะทำอะไร ?
เราจะมาทำแฟลชที่สามารถบันทึกภาพจากกล้องไปเป็น JPG ได้

มันยากตรงไหน?
เราต้องมาทำความเข้าใจกันก่อนว่า แฟลชนี้ เราจะใช้งานในลักษณะ ออนไลน์ อยู่บนเว็ปไซต์
ทำไมถึงต้องบอกแบบนี้หรอครับ นั่นก็เพราะว่าแฟลชที่อยู่บนเว็ปไซต์จะมีข้อจำกัดคือ ไม่สามารถบันทึกไฟล์เป็น JPG ได้ ดังนั้นเราต้องมีเพื่อนช่วยเพิ่มความสามารถให้แฟลช ในกรณีนี้ เพื่อนคนนั้นเราจะยกให้เป็น PHP นั่นเองที่มาช่วย อาจจะให้มือใหม่บางคนมองเห็นวิธีทำงานกับ PHP ด้วยบางส่วน นะครับ

แล้วคนที่ทำเป็นมาบ้างแล้วหละ?
จากการค้นข้อมูลใน Google ถึงการบันทึก JPG ด้วย PHP ทุกตัวอย่างยังมีข้อด้อย นั่นคือ โค้ดเยอะ ใช้ยาก
และปัญหาหลักก็คือ ไม่สามารถส่งข้อมูลอื่นๆ ไปพร้อมกับภาพได้ แต่วิธีที่เราจะมาลองทำกันนั้น เราสามารถส่งข้อมูลอื่นๆไปกับภาพได้ด้วย

ทำไมต้องสอน ว่างนักหรอ?
ว่างที่ไหนเล้า งานเยอะจะตายอยู่แล้ว วันนี้วันเสาร์ ใช้เวลาให้เป็นประโยชน์หน่อยละกัน

1.เตรียมเครื่องมือ

เริ่มกันเลยดีกว่า ก่อนอื่น เตรียมเครื่องมือในการทำมาหากินก่ิอน อย่างที่บอกกันไปแต่ต้นว่า โค้ดของคนอื่นยุ่งยาก เยอะแยะ
ดังนั้นเราจะมาลดความยุ่งยากด้วยคลาสกึ่งสำเร็จรูป ที่ชาวบ้านแจกกันฟรีๆดีกว่า

เริ่มจาก คลาสจากโปรเจกต์ของ thaiflashdev.com

คลาสที่จะใช้นี้ นี้ขอขายหน่อยนะ ว่าผมเป็นคนเขียนขึ้นมาเอง 1 คลาสภายในโปรเจกต์นั้นแหละ (อิอิ แอบภูมิใจ)
นั่นคือคลาส HTTPSender ใช้สำหรับส่งข้อมูลไปให้ PHP โดยโค้ดที่ได้ ก็จะสั้น และกระชับ จนจบโปรเจคนี้คุณจะได้เห็นว่ามันง่ายขนาดไหน

เอาโหลดกันเลยที่ http://code.google.com/p/thaiflashdev/downloads/list

หลังจากโหลดมาแล้วก็ทำการ Extract โฟลเดอร์ com มาไว้ในโฟลเดอร์ที่เราจะทำงาน ตามภาพ

คลาสต่อมาที่เราจะใช้ นั่นก็คือคลาสที่ใช้แปลงข้อมูล BitmapData ไปเป็น JPG นั่นเอง

Download ได้จาก http://code.google.com/p/as3corelib/downloads/list

จากนั้นเข้าไปหาโฟลเดอร์ com แล้ว copy มาใส่ที่เดิม ห้ามเปลี่ยนชื่อโฟลเดอร์เด็จขาดนะครับ copy มาวางเลยทับของเดิมไปเลย
ไม่ต้องห่วง เพราะมันมีไฟล์ไม่เหมืิอนกัน

คลาสต่อมาที่จะใช้งาน นั่นก็คือคลาส Base64 ใช้สำหรับเข้ารหัสก่อนส่ง เพื่อความสะดวก (นั่นแน่ บางคนแอบรู้แล้วสิว่าจะทำอะไร แต่อ่านให้จบก่อนนะ)

ดาวน์โหลดคลาส Base64 ได้ที่ http://dynamicflash.com/goodies/base64/

หลังจากโหลดมาแล้ว เข้าไปหาโฟลเดอร์ com เหมือนกัน แล้ว Copy มาทับใส่ที่เดิมนะครับ ง่ายๆ ไม่ต้องคิดมาก

2 . เริ่มต้นเขียนโค้ด AS3.0 กัน

ให้สร้างเอกสารแฟลชเป็น Actionscript 3.0 นะครับ จะใช้แฟลชเวอร์ชั่น CS3 หรือ cs4 ก็ได้ไม่มีปัญหา แต่ห้ามต่ำกว่านี้

แล้วบันทึกก่อนเลย ไว้ที่เดียวกับโฟลเดอร์ com

เปิดหน้าต่าง Library ด้วยการกด CTRL+L แล้วคลิกที่เมนูขวาบน ของหน้าต่าง เลือก New Video

แล้วจะมีหน้าต่างเด้งขึ้นมา ไม่ต้องตั้งชื่ออะไรทั้งนั้น กด OK ได้เลยตามภาพ

เสร็จแล้ว เราจะได้วัตถุ Video 1 ลากมันจากไลบรารี่ ไปวางบน Stage ปรับขนาดตามใจชอบ
แล้วตั้งชื่อ instance name ว่า “viewport” ตามภาพ

จากนั้น ให้เขียนโค้ดใส่เฟรมลงไปว่า

จากนั้นให้กด CTRL+ENTER เราจะได้ภาพจาก Webcam ของเราแล้ว ง่ายจริงๆ ด้วย โอโห
ที่เหลือก็แค่บันทึกให้เป็น JPG ให้ได้

ขั้นต่อตอนมาให้เราใส่ปุ่มกด ลงไป 1 ปุ่มเป็นปุ่มไว้ถ่ายภาพ แล้วตั้งชื่อปุ่มว่า shutter ตามภาพ

ขั้นตอนต่อไป เราจะทำการเขียนโค้ดให้แคปเจอร์ภาพ และส่งภาพไปให้ PHP บันทึกไว้ ซึ่งไม่ยาก โค้ดสั้นมากๆ

อย่างที่บอก เพิ่มโค้ดลงไปตามภาพ

จากโค้ดด้านบน http://localhost/~apple/save_jpg.php คือที่อยู่ของไฟล์ php ที่เราจะใช้งานในการเซฟ

และบรรทัด = new JPEGEncoder( 80 ); เลข 80 คือคุณภาพของไฟล์ภาพที่เราจะได้ เต็มที่คือ 100 สวยสุด ถ้าให้น้อยลง คุณภาพจะต่ำ แต่ขนาดไฟล์จะเล็กลงตามคุณภาพ ให้เลือกใช้ให้เหมาะสม
จะเห็นได้ว่า จากโค้ด เราจะใช้ ชั่วโมง_นาที_วินาที.jpg จากคลาส Date ในการตั้งชื่อไฟล์ JPG นี้
และส่งข้อมูลชื่อภาพ ไปพร้อมกับข้อมูลไฟล์ภาพที่ทำการเข้ารหัสไฟล์เป็น Base64 ก่อน เพื่อให้มันสามารถส่งข้อมูลไปในรูปเป็นข้อความได้ พร้อมกับชื่อภาพ ที่เป็นข้อความ ซึ่งจะต่างจากโค้ดตัวอย่างที่ผมพบใน Google ที่จะส่งไฟล์ภาพไปเลย ทำให้ไม่สามารถส่งไปพร้อมกับข้อมูลอื่นๆได้

โค้ดสำหรับแฟลช หมดแล้วครับ เพียงแค่นี้เอง จะเห็นว่าง่าย เพราะเราใช้คลาส HTTPSender ในการส่งข้อมูล หากว่าไม่ใช้ เราต้องเขียนมากกว่านี้อีกประมาณ 10 บรรทัดแน่ะ เยอะไหมหละ

จากนั้นเราก็เขียนโค้ด PHP ซึ่งง่ายมาก และบันทึกไว้ในโฮส ซึ่งผมจะใช้เป็นโฮสจำลองเวอร์ชั่นสำหรับสำหรับ Mac นั่นก็คือ XMAPP

สามารถหา Download มาติดตั้งได้ ทั้งเวอร์ชั่นของ Mac ของ Windows และของ Linux ได้ที่

http://www.apachefriends.org/en/xampp.html

จากนั้นผมก็เขียนโค้ด PHP เพียง 3 บรรทัดเท่านั้น และบันทึกไฟล์ไว้ที่โฮสจำลองของผมเอง ตามภาพ