ImageData
ImageData - об'єкт який містить піксельні дані області полотна canvas.
Синтаксис:
ctx.createImageData(width, height);
ctx.getImageData(x, y, width, height );
Параметри:
ctx - об'єкт CanvasRenderingContext2D.
createImageData - метод CanvasRenderingContext2D.createImageData().
width - ширина у пікселях області піксельних даних.
height - висота у пікселях області піксельних даних.
getImageData - метод CanvasRenderingContext2D.getImageData().
x - координати осі x на полотні.
y - координати осі y на полотні.
Опис:
ImageData об'єкт який містить піксельні дані області полотна canvas.
Об'єкт створюється за допомогою CanvasRenderingContext2D.createImageData() або отримується з CanvasRenderingContext2D.getImageData().
Піксельні дані ImageData малююттся на полотні canvas за допомогою CanvasRenderingContext2D.putImageData().
- Властивості об'єкта ImageData:
- width - ширина у пікселях ImageData.
- height - висота у пікселях ImageData.
- colorSpaceце - колірний простір.
- data - піксельні дані.
<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){
//змінюємо колір 255- r,g,b
imgData.data[i]=255-imgData.data[i];
imgData.data[i+1]=255-imgData.data[i+1];
imgData.data[i+2]=255-imgData.data[i+2];
}
//малюємо на полотні зміненні дані imgData
ctx.putImageData(imgData,0,0);