...

View Full Version : Check Canvas Image Pixel



Tim Conner
07-11-2012, 04:45 AM
How could I select a canvas Image Pixel? To check if its a specific color?
-Thanks

Tim Conner
07-11-2012, 06:22 AM
I found sherlockturtles post which is kinda like what I want but I Want to know how to check its specific color.

Philip M
07-11-2012, 09:29 AM
http://instant-eyedropper.com/

http://blog.flexexamples.com/2007/08/02/finding-a-pixels-color-value-using-the-bitmap-classes-and-getpixel/


All advice is supplied packaged by intellectual weight, and not by volume. Contents may settle slightly in transit.

DeadFred
07-11-2012, 01:44 PM
First you'll have to get the ImageData of the specific pixel of your canvas:


var xPixel
var yPixel

var pixelData canvasContext.getImageData(xPixel - 1, yPixel - 1, 1, 1).data;



The pixelData variable wil now contain a array with your rgb and transperancy values:


var red = pixelData[0];
var green = pixelData[1];
var blue = pixelData[2];
var transperancy = pixelData[3]/255;(this is a value from 0 - 255 so I convert it to 0 - 1)

Tim Conner
07-11-2012, 04:08 PM
Ok. So what would canvascontent be?

Tim Conner
07-11-2012, 05:09 PM
I have this code but Getimage data does not work, because its a canvas?



var c=document.getElementById("mapa");



for (i=0; i<water/4*6; i++)
{
var x =1;
x=Math.floor(Math.random()*612)
var y =1;
y=Math.floor(Math.random()*256)

var ctx=c.getContext("2d");
ctx.fillStyle="#0000FF";
ctx.fillRect(x,y,1,1);
}


for (i=0; i<water*6; i++)
{
var x =1;
var y =1;
x=Math.floor(Math.random()*612)
y=Math.floor(Math.random()*256)

var pixelData = c.getImageData(x + 1, y, 1, 1).data;
var red = pixelData[0];
var green = pixelData[1];
var blue = pixelData[2];
if(blue == 255){

var ctx=c.getContext("2d");
ctx.fillStyle="#0000FF";
ctx.fillRect(x,y,1,1);
}
else{
pixelData = c.getImageData(x, y-1, 1, 1).data;
red = pixelData[0];
green = pixelData[1];
blue = pixelData[2];

if(blue == 255){

var ctx=c.getContext("2d");
ctx.fillStyle="#0000FF";
ctx.fillRect(x,y,1,1);
}
else{

pixelData = c.getImageData(x, y+1, 1, 1).data;
red = pixelData[0];
green = pixelData[1];
blue = pixelData[2];
if(blue ==255){

var ctx=c.getContext("2d");
ctx.fillStyle="#0000FF";
ctx.fillRect(x,y,1,1);
}
else{

pixelData = c.getImageData(x + 1, y, 1, 1).data;
red = pixelData[0];
green = pixelData[1];
blue = pixelData[2];
if(blue == 255){

var ctx=c.getContext("2d");
ctx.fillStyle="#0000FF";
ctx.fillRect(x,y,1,1);
}
else{
i--;
}

}
}
}

DeadFred
07-11-2012, 06:48 PM
Ok. So what would canvascontent be?

its your ctx, its canvasContext btw.

And thats the reason why it isnt working

Tim Conner
07-11-2012, 07:13 PM
Wait. I tried this my goal is to have only blue can be next to blue(I seed a couple before hand)


for (i=0; i<water; i++)
{
var x =1;
var y =1;
x=Math.floor(Math.random()*100)
y=Math.floor(Math.random()*1)

var pixelData = c.canvasContext(x + 1, y, 1, 1).data;
var red = pixelData[0];
var green = pixelData[1];
var blue = pixelData[2];
if(blue == 255){

var ctx=c.canvasContext("2d");
ctx.fillStyle="#0000FF";
ctx.fillRect(x,y,1,1);
}
else{
pixelData = c.canvasContext(x, y-1, 1, 1).data;
red = pixelData[0];
green = pixelData[1];
blue = pixelData[2];

if(blue == 255){

var ctx=c.canvasContext("2d");
ctx.fillStyle="#0000FF";
ctx.fillRect(x,y,1,1);
}
else{

pixelData = c.canvasContext(x, y+1, 1, 1).data;
red = pixelData[0];
green = pixelData[1];
blue = pixelData[2];
if(blue ==255){

var ctx=c.canvasContext("2d");
ctx.fillStyle="#0000FF";
ctx.fillRect(x,y,1,1);
}
else{

pixelData = c.canvasContext(x + 1, y, 1, 1).data;
red = pixelData[0];
green = pixelData[1];
blue = pixelData[2];
if(blue == 255){

var ctx=c.canvasContext("2d");
ctx.fillStyle="#0000FF";
ctx.fillRect(x,y,1,1);
}
else{
i--;
}

}
}
}

Tim Conner
07-12-2012, 04:34 PM
? Please im not sure what im doing wrong.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum