How To Replace Image Pixel In Webos Palm Js

I want to replace image pixel color with other color in webos. so can any one suggest how i do this. Thanks

Solution 1:

This can be done by using the HTML5 canvas API. Create a canvas the size of the image, and then draw the image into the canvas. Get the image data, and manipulate away!

var canvas = document.getElementById(canvasID);
var context = canvas.getContext('2d');
var image = context.getImageData(0,0,canvas.width,canvas.height);

image is now an imageData object, which contains an array data, which contains all pixels of the image. Suppose you wanted to remove the green component at the pixel in the sixth column and the third row.

var index = (5*image.width+2)*4;
//six columns of pixels, plus two for the third row.
//Multiply by four, because there are four channels.
image.data[index+1] = 0; //Plus one, because we want the second component. 

Once your pixel manipulation is done, load the image data back into the canvas.

context.putImageData(image);