Pobieranie danych piksela
Listing
window.onload = function() {
var cv = document.getElementById("canvas");
var ctx = cv.getContext("2d");
//położenie obrazka na canvas
var imageX = 10;
var imageY = 10;
//pobranie obrazka
var img = document.getElementById("aniolek");
//wymiary obrazka
var imageW = img.width;
var imageH = img.height;
//odrysowanie obrazka
ctx.drawImage(img, imageX, imageY);
//pobranie danych obrazka
var imageData = ctx.getImageData(imageX, imageY, imageW, imageH);
var data = imageData.data;
//pobranie danych wskazanego piksela
//koordynaty x i y są koordynatami w obrębie obrazka i jego pobranych
//danych, a nie względem kontekstu.
//piksele są liczone 0,1,2,3,4 ...
//tablica ma indeksy 0,1,2,3 ...
var x = 99;
var y = 99;
var red = data[((imageW * y) + x) * 4];
var green = data[((imageW * y) + x) * 4 + 1];
var blue = data[((imageW * y) + x) * 4 + 2];
var alpha = data[((imageW * y) + x) * 4 + 3];
//wyświetlanie danych pierwszego piksela
ctx.fillText("Dane piksela(99, 99): ", 340, 20);
ctx.fillText("red: " + red, 340, 40);
ctx.fillText("green: " + green, 340, 60);
ctx.fillText("blue: " + blue, 340, 80);
ctx.fillText("alpha: " + alpha, 340, 100);
};