setPixel?

[codemonkeynorth]

Hi,

I was just looking at the docs and I couldn't see a way to alter the image data? (eg setPixel(x,y, rgba) etc)

Was wondering if I missed something?

Essentially in one example we want to be able to take a greyscale image, read each pixel's grey level and map it to another 256-colour palette

pseudocode:

var rgba = getPixel(x,y)
var avg = Math.floor((rgba.r + rgba.g + rgba.b)/3);
rgba.r = lut[avg].r;
rgba.g = lut[avg].g;
rgba.b = lut[avg].b;
setPixel(x,y, rgba);

alternatively eg using getPixels, modifying the array and calling setPixels(modifiedArray)

admittedly this can be done with

var canvas = new CanvasPlus();
// ...
var context = canvas.getContext();
var imageData = context.getImageData(0,0, width, height);

// ...modify imageData

context.putImageData(imageData,0,0);  

// this now would also get the modified pixels
var data = canvas.getPixels();

thanks
J.

[jhuckaby]

Hello there,

Yeah, currently the only way to access the raw pixels is through getPixels(). This will give you a Uint8ClampedArray of RGBA pixels, which you can manipulate. The problem is, you'd then have to use getContext() to put the image data back, using the HTML5 Canvas API.

Sorry there isn't a better API. I'll add this to the TODO list for a future release.

[codemonkeynorth]

@jhuckaby thanks for the update, just wanted to check I wasn’t missing anything obvious

Regards
J