ImageData.data

ImageData.data - піксельні дані полотна.

Синтаксис:

ImageData.data;

Параметри:

ImageData - об'єкт ImageData.

Опис:

data властивість об'єкта ImageData яка містить піксельні дані полотна у вигляді масиву Uint8ClampedArray.

Піксельні дані зберігаються як одновимірний масив у порядку RGBA з цілими значеннями між 0 - 255.

Для одного пікселя дані представляються у вигляді [R,G,B,A] (червоний, зелений, синій, альфа), тобто 4 значення для одного пікселя, наприклад [255,45,67, 0].

Якщо об'єкт ImageData має ширину 10 пікселів, висоту 10 пікселів, а в сумв 10*10 виходить 100 пікселів. Тоді масив data буде містити 4*100 = 400 значень.

var canvas=document.createElement('canvas');
var ctx=canvas.getContext('2d');
var imgData=ctx.getImageData(0,0,10,10);
alert( imgData.data.length );

Приклад:

Приклад отримання значення кольорів RGBA з вказаного одного пікселя при розмірі ImageData 1px*1px:

var canvas=document.getElementById('test');
var ctx=canvas.getContext('2d');
//малюємо на полотні градієнт
var gradient = ctx.createLinearGradient(0, 0, canvas.width, canvas.height);
gradient.addColorStop(0, 'yellow');
gradient.addColorStop(1, 'blue');
ctx.fillStyle = gradient;
ctx.fillRect(0, 0, canvas.width, canvas.height);

//отримуємо дані пікселя по осі x: 10, y:10
var imgData=ctx.getImageData(10,10,1,1);
//отримуємо з масуву дані кольрів RGBA
var r=imgData.data[0];
var g=imgData.data[1];
var b=imgData.data[2];
var a=imgData.data[3];

console.log(r,g,b,a);
alert(JSON.stringify(imgData));

Зверніть увагу! Для обробки піксельних даних ImageData де кількість пікселів є багато розташування послідовносні RGBA пікселів: червоний компонент верхнього лівого пікселя має індекс 0 у масиві. Потім пікселі рухаються зліва направо, а потім вниз по всьому масиву.

Тобто для отримання даних RGBA необхідного пікселя необхідно використовувати формулу: imageData.data[( Y * imageData.width * 4) + (X * 4 + indexColor) ]. Де indexColor : 0- R, 1-G, 2-B, 3-A.

Приклад отримання з масиву data пікселя по осі X:20, Y:25:

var canvas=document.getElementById('test2');
//малюємо все полотно у чорний колір - rgb(0,0,0)
var ctx=canvas.getContext('2d');
ctx.fillStyle='black'; //або 'rgb(0,0,0)'
ctx.fillRect(0, 0, canvas.width, canvas.height);
//малюємо один піксель у колір rgb(230,230,250)
ctx.fillStyle='rgb(230,230,250)';
var x=20, y=25;
ctx.fillRect(x, y, 1,1);

//отримуємо дані всіх пікселів
var imgDat=ctx.getImageData(0,0,canvas.width, canvas.height);
//отримуємо дані RGBA пікселя по координатах X:20, Y:25 за формулою
var r=imgDat.data[ (y*imgDat.width*4)+(x*4) ]; //R
var g=imgDat.data[ (y*imgDat.width*4)+(x*4+1) ];  //G
var b=imgDat.data[ (y*imgDat.width*4)+(x*4+2) ]; //B
var a=imgDat.data[ (y*imgDat.width*4)+(x*4+3) ]; //A

alert('R: '+r+' G:'+g+' B:'+b+' A:'+a);

Приклад прожодження і змінна даних ImageData:

<img id="image" src="/dani/test.png">
<canvas id="test3"></canvas>

var canvas=document.getElementById('test3'), img=document.getElementById('image');
var ctx=canvas.getContext('2d');
canvas.width=img.naturalWidth;
canvas.height=img.naturalHeight;
ctx.drawImage(img,0,0,img.naturalWidth,img.naturalHeight);
var imgData=ctx.getImageData(0,0,canvas.width,canvas.height);
for(var i=0;i<imgData.data.length;i+=4){
	//змінюємо колір R на 0
	imgData.data[i]=0;
}
//малюємо на полотні зміненні дані imgData
ctx.putImageData(imgData,0,0);