แทรกข้อมูลภาพในโค๊ด html

   ผมบันทึก บันทึกนี้ไว้เพื่อกันลืม เนื่องจากทำอะไรเล่นๆ ที่เป็นประโยชน์ (หรือเปล่า) อยู่ครับ สิ่งที่ผมวางแผนที่จะทำคือ IoT หรือ Internet of Thing โดยใช้ ESP8266 ครับ ของเล่นที่จริงจังชิ้นนี้ผมต้องการสร้าง รีโมตควบคุมกล้องถ่ายรูป โดยใช้มือถือควบคุมครับ ซึ่ง Inline Images with Data URLs ก็จะเป็นวิธีที่จะได้หน้าจอในการควบคุมที่สวยๆ เพราะสามารถใส่รูปได้

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

http://4tronix.co.uk/store/resources/image/18/c2/2.jpg

   ดังนั้นการใส่ภาพเพื่อให้ ESP8266 แสดงผลในหน้า web วิธีที่ง่ายที่สุดก็คือ Inline Images with Data URLs นี่แหละครับโดยรูปแบบสามารถเขียนได้ดังนี้

data:[<mediatype>][;base64],<data>

และถ้าเราจะใส่ภาพก็จะเขียนได้ดังตัวอย่าง

<img src="data:image/gif;base64,R0lGODlhEAAOALMAAOazToeHh0tLS/7LZv/0jvb29t/f3//Ub/
/ge8WSLf/rhf/3kdbW1mxsbP//mf///yH5BAAAAAAALAAAAAAQAA4AAARe8L1Ekyky67QZ1hLnjM5UUde0ECwLJoExKcpp
V0aCcGCmTIHEIUEqjgaORCMxIC6e0CcguWw6aFjsVMkkIr7g77ZKPJjPZqIyd7sJAgVGoEGv2xsBxqNgYPj/gAwXEQA7" 
width="16" height="14" alt="embedded folder icon">

และจะได้ภาพจากโค๊ดด้านบนดังภาพด้านล่าง:

อ้างอิง : http://www.websiteoptimization.com

   ถ้าภาพมีขนาดใหญ่โค๊ดก็จะใหญ่ตามไปด้วย ดังนั้นเราจึงต้องเลือกขนาดและรูปแบบของภาพที่เหมาะสมด้วย เพื่อให้สามารถใส่ลงในหน่วยความจำของ ESP8266 ได้

(ภาพด้านบนได้จาก Inline Images with Data URLs ไม่ใช่ภาพจากการ Capture)

   ซึ่งเป้าหมายของผมต้องการหน้าจอดังภาพสำหรับควบคุมการทำงานของกล้อง

บันทึกหน้ามาต่อกันว่าเราจะควบคุมกล้องด้วย IoT อย่าง ESP8266 ได้อย่างไร