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);
<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>
</script>
alert ผลออกมา เป็น 254 0 0 255 คือ สีแดงนั่นเอง(เพี้ยนเล็กน้อย)
ลองดัดแปลงใช้งานด้าน image processing เอานะครับอาจจะวนลูปตรวจสอบสี
ไม่มีความคิดเห็น:
แสดงความคิดเห็น