นโยบายการจัดการความรู้ มหาวิทยาลัยสงขลานครินทร์ 1.ให้ใช้เครื่องมือการจัดการความรู้ผลักดัน คุณภาพคน และกระบวนทำงาน 2.ส่งเสริมการแลกเปลี่ยนประสบการณ์การทำงาน จากหน้างาน 3.ส่งเสริมให้มีเวทีเรียนรู้ร่วมกัน
อ่าน: 482
ความเห็น: 0

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

Inline Images with Data URLs

   ผมบันทึก บันทึกนี้ไว้เพื่อกันลืม เนื่องจากทำอะไรเล่นๆ ที่เป็นประโยชน์ (หรือเปล่า) อยู่ครับ สิ่งที่ผมวางแผนที่จะทำคือ 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">

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

folder icon

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

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

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

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

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

หมวดหมู่บันทึก: พัฒนางานประจำ
สัญญาอนุญาต: ซีซี: แสดงที่มา-ไม่ใช้เพื่อการค้า-อนุญาตแบบเดียวกัน Cc-by-nc-sa
สร้าง: 24 ธันวาคม 2559 20:57 แก้ไข: 25 ธันวาคม 2559 21:12 [ แจ้งไม่เหมาะสม ]
ดอกไม้
สมาชิกที่ให้กำลังใจ: Ico24 ดำขำ และ Ico24 โอ๋-อโณ.
สมาชิกที่ให้กำลังใจ
 
Facebook
Twitter
Google

บันทึกอื่นๆ

ความเห็น

ไม่มีความเห็น

ร่วมแสดงความเห็นในหน้านี้

ชื่อ:
อีเมล:
IP แอดเดรส: 54.145.117.60
ข้อความ:  
เรียกเครื่องมือจัดการข้อความ
   
ยกเลิก หรือ