html5 canvas image compositing

Question

Is there a way to overlay an image (jpeg) while keying out a certain color, like black? So that the all the pure black pixels in the image are transparent? Much like the "screen" blending mode in Photoshop?

I've tried looking into the globalCompositeOperation property of the canvas context, but nothing seems to do the trick.

Thanks!

FlavorScape · Answer 1 · 2012-08-30T01:24:58.333

I think you'll want to look into direct pixel manipulation. Slow but if speed is not as important as getting good results, do it.

for (y = 0; y < height; y++) {
    inpos = y * width * 4; // *4 for 4 ints per pixel
    outpos = inpos + w2 * 4
    for (x = 0; x < w2; x++) {

        g = imageData.data[inpos++] / 3; 
        a = imageData.data[inpos++];     

        if( g > someValue )
              a = someNewAlpha;

        imageData.data[outpos++] = a;
    }
}

for more help see http://beej.us/blog/data/html5s-canvas-2-pixel/

there's a number of ways in OpenGL but i'm not sure they would apply for your application, not knowing what it is supposed to do.

html5 canvas image compositing

1 Answers1