วิธี HTML canvas createImageData()

คู่มือ HTML5 Canvas

การประกาศและการใช้งาน

createImageData() วิธีสร้างวัตถุ ImageData ที่มีพื้นที่ว่างใหม่ ค่าพิกษุ์ปริมาณต้นทางเป็นสีดำสดาน

สำหรับแต่ละพิกษุ์ของวัตถุ ImageData มีข้อมูลสี่มิติ คือค่า RGBA:

  • R - สีสีแดง (0-255)
  • G - สีสีเขียว (0-255)
  • B - สีสีน้ำเงิน (0-255)
  • A - ช่องสี alpha (0-255; 0 คือสีสดาน 255 คือเห็นได้เต็มทั้งหมด)

ดังนั้น สีสีดำที่ไม่มีสี (transparent black) จะเป็น (0,0,0,0)

color/alpha มีรูปแบบแบบแรงจัดเรียง และเพราะตัวแปรแบบแรงจัดเรียงมีข้อมูลสี่ข้อมูลต่อพิกเซล ดังนั้นขนาดของตัวแปรแบบแรงจัดเรียงคือสี่เท่าของ ImageData (มีวิธีง่ายที่จะได้ขนาดของตัวแปรแบบแรงจัดเรียงคือใช้ ImageDataObject.data.length)

ตัวแปรแบบแรงจัดเรียงที่มีข้อมูล color/alpha ถูกเก็บไว้ใน ImageData ของ data ในคุณสมบัติ

คำเตือน:หลังจากที่ดำเนินการเสร็จกับข้อมูล color/alpha ในตัวแปรแบบแรงจัดเรียง putImageData() เมธอดนี้จะคัดลอกข้อมูลภาพกลับไปที่หน้าแผ่นภาพ

ตัวอย่าง:

รูปแบบนี้ทำให้พิกเซลแรกของวัตถุ ImageData กลายเป็นสีแดง

imgData = ctx.createImageData(100, 100);
imgData.data[0] = 255;
imgData.data[1] = 0;
imgData.data[2] = 0;
imgData.data[3] = 255;

รูปแบบนี้ทำให้พิกเซลที่สองของวัตถุ ImageData กลายเป็นสีแดง

imgData = ctx.createImageData(100, 100);
imgData.data[4] = 0;
imgData.data[5] = 255;
imgData.data[6] = 0;
imgData.data[7] = 255;

ตัวอย่าง

สร้างวัตถุ ImageData ขนาด 100*100 พิกเซล ทั้งหมดเป็นสีแดงและนำมันไปที่หน้าแผ่นภาพ

เว็บเบราว์เซอร์ของคุณไม่สนับสนุนแท็ก HTML5 canvas

JavaScript:

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var imgData =ctx.createImageData(100, 100);
for (var i = 0; i < imgData.data.length; i += 4)
  {
  imgData.data[i+0] = 255;
  imgData.data[i+1] = 0;
  imgData.data[i+2] = 0;
  imgData.data[i+3] = 255;
  }
ctx.putImageData(imgData, 10, 10);

ทดลองด้วยตัวเอง

รูปแบบการใช้งาน

มีสองรูปแบบของเมธอด createImageData()

1. สร้าง ImageData ออบเจกใหม่ด้วยขนาดที่กำหนด (นับเป็นพิกเซล):

var imgData=context.createImageData(width,height);

2. สร้าง ImageData ออบเจกใหม่ที่มีขนาดเท่ากับอีก ImageData ออบเจกที่กำหนด โดยไม่คัดลอกข้อมูลภาพ (จะไม่คัดลอกข้อมูลภาพ):

var imgData=context.createImageData(imageData);

ตัวแปรค่า

ตัวแปร คำอธิบาย
width ความกว้างของ ImageData ออบเจก โดยนับเป็นพิกเซล
height ความสูงของ ImageData ออบเจก โดยนับเป็นพิกเซล
imageData อีก ImageData ออบเจก

การสนับสนุนโดยบราวเซอร์

ตัวเลขในตารางนี้บอกเกี่ยวกับเวอร์ชั่นบราวเซอร์แรกที่สนับสนุนคุณสมบัตินี้

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 3.6 4.0 10.1

หมายเหตุ：Internet Explorer 8 และเวอร์ชั่นต่อไปนี้ไม่สนับสนุนสมาชิก <canvas>

คู่มือ HTML5 Canvas