Power By 专否社区

HTML5 how to draw transparent pixel image in canvas

Go To StackoverFlow.com

5

I'm drawing an image using rgb pixel data. I need to set transparent background color for that image. What value I can set for alpha to be a transparent image? Or is there any other solution for this?

2012-04-04 20:47
by Joe
related: http://stackoverflow.com/questions/2916938/how-to-draw-transparent-image-with-html5-canvas-elemen - Nobita 2012-04-04 20:52

8

If I understand what you need, you basically want to turn specific colors on an image transparent. To do that you need to use getImageData check out mdn for an explanation on pixel manipulation.

Heres some sample code

var imgd = ctx.getImageData(0, 0, imageWidth, imageHeight),
    pix = imgd.data;

for (var i = 0, n = pix.length; i <n; i += 4) {
    var r = pix[i],
        g = pix[i+1],
        b = pix[i+2];

    if(g > 150){ 
        // If the green component value is higher than 150
        // make the pixel transparent because i+3 is the alpha component
        // values 0-255 work, 255 is solid
        pix[i + 3] = 0;
    }
}

ctx.putImageData(imgd, 0, 0);​

And a working demo

With the above code you could check for fuschia by using

if(r == 255 && g == 0 && b == 255)

2012-04-05 01:57
by Loktar
After drawing pixel image, I have to move that image on mousemove event. When I move that image, I can see white rectangle around that image. I need to avoid that. Or is there any way to move that image alone instead of pixel rectangle - Joe 2012-04-05 13:31
You'd have to do the above except look for pixels that have an rgb of 255,255,255 (white). Look at the jsfiddle, it makes a temp canvas element, and draws the results to it. That's what you would need to do. You'd do the pixel manipulation and use putImageData to put the data on a new canvas, and thats what you would move around instead of the image - Loktar 2012-04-05 13:37
After drawing image on temp canvas element, I used below code and my problem is solved.Thanks for your help.
var imgURL = tempCanvas.toDataURL(); var myImage = new Image(); myImage.src=imgURL;

      context.drawImage(myImage,xPos,yPos);
< - Joe 2012-04-05 17:22
Awesome glad it worked for yo - Loktar 2012-04-05 18:00

2

I think you want the clearRect canvas method:

http://www.w3schools.com/html5/canvas_clearrect.asp

This will let you clear pixels to transparent (or any other RGBA color) without fuss or pixel manipulation.

2012-04-05 21:27
by Colin Godsey

0

an alpha of 0 indications that pixel is completely transparent an alpha value of 255 is completely opaque meaning that it will have no transparency.

if you portions of your image are completely transparent (an alpha of 0) it doesn't matter what you use for the RGB values as long as use an Alpha of 0. On a side note some older windows programs that I have used make an assumption like the upper left pixel or the lower right pixel is to be used as the transparency color. It would then loop through all of the pixels and set the alpha to 0 when it encountered this specific RGB value.

If you use an Alpha of 127 and the image appeared on top of another image it would look like the two images are equally visible or that the bottom image is bleeding 50% of it's colors through to the top image.

Set a variable for alpha if you want to test and see what it looks like when you apply it to the entire image.

2012-04-04 20:58
by Dan P
When I set 0 for alpha in all pixels, my image portion completely turn to white - Joe 2012-04-04 21:46
Ads