CanvasRenderingContext2D.getImageData()

CanvasRenderingContext2D.getImageData() - повертає об'єкт ImageData.

Синтаксис:

ctx.getImageData( x, y, w, h );

Параметри:

ctx - об'єкт CanvasRenderingContext2D.

x - координати осі X.

y - координати осі Y.

w - ширина об'єкту.

h - висота об'єкту.

Опис:

getImageData() метод об'єкту CanvasRenderingContext2D який повертає об'єкт ImageData який містить дані пікселів для області полотна позначеного прямокутника ,який починається в x, y і має w ширину, і h висоту.

Приклад:

var ctx=document.getElementById("canvas").getContext("2d");
ctx.fillStyle='red';
ctx.fillRect(0,0, 190, 200);
var obImgData = ctx.getImageData(0, 0 , 5, 5);
alert( obImgData );
alert( JSON.stringify(obImgData) );

Приклад як за допомогою JavaScript отримати значення кольору пікселя з полотна canvas:

function getColorPixelCanvas(canvas, x,y){
  var ctx=canvas.getContext('2d');
  var img_data=ctx.getImageData(x,y,1,1);
  return 'rgb('+img_data.data[0]+','+img_data.data[1]+','+img_data.data[2]+')';
}

var canvas=document.getElementById("canvas");
var color=getColorPixelCanvas(canvas, 10, 10);
alert(color);