HTML5 ตรวจสอบสี image

Workshop นี้เป็น workshop เชิงทดลองเพื่อตรวจหาค่า Image ของภาพ

สร้างภาพโดยเทสีแดงลงไป รหัส RGB #FF0000 ตั้งชื่อว่า color.jpg

สร้าง html เขียน code ตรวจสอบ ภาพ ใส่ใน body

 <img id="color" src="color.jpg">
  <canvas id="myCanvas">
    Your browser does not support the HTML5 canvas tag.
  </canvas>
  <script>
    document.getElementById("color").onload = function () {
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    var img = document.getElementById("color");
    ctx.drawImage(img, 0, 0);
    var imgData = ctx.getImageData(0, 0, c.width, c.height);

alert(imgData.data[0] + " " + imgData.data[1] + " " + imgData.data[2] + " " + imgData.data[3]);

};
  </script>

 

alert ผลออกมา เป็น 254 0 0 255 คือ สีแดงนั่นเอง(เพี้ยนเล็กน้อย)

ลองดัดแปลงใช้งานด้าน image processing เอานะครับอาจจะวนลูปตรวจสอบสี

action script 2.0 ทำ Quiz Game

 

ออกแบบหน้าจอ ปุ่มสีเหลือง convert เป็น button

 

frame ที่ื 1 เขียน code ตั้งค่า _root.score=0 และ stop();

 

ปุ่มที่ ถูก ใส่ code ดังนี้ 

on (press){

    _root.score=_root.score+1;
    nextFrame();
}

 

ปุ่มที่ ไม่ถูกไม่ต้องใส่ คะแนน

 

สร้าง frame 2 โดยกด F6 ที่เฟรม

 

หน้าสุดท้ายใส่ dynamic text ตั้ง instant name และ var เป็น score