Transparent background sprite...[Solved]

Basically I'm trying to take an image that has been canvas snapshotted and make the background of the image transparent after the snapshot takes place. The current background of the image that has been snapshotted is white, but I was wondering if anyone knew a way to make the white portions of an image transparent, either through webgl or another method?

Anyone got any ideas?

One way would be to send the snapshot URL to a server script with AJAX. there are many image libraries for PHP, which allow you to do such things. Then you can retrieve the URL of the new generated image when the ajax request completes, and invoke download

Maybe it is possible to do it on the client side only, but I don't know how

It depends on how fast you need this to be. For example, you could use ROJOhound's Canvas plugin where you can paste the sprite to the canvas plugin, then loop through all pixels, get the color/alpha value with rgbaAt() and in case it's white replace the alpha with

Draw point (x,y) with "rgba(0, 0, 0, 0)"

Of course that wouldn't be very fast.

tulamide

Wouldn't that be cpu intensive? The canvas plugin itself is very useful but I noticed it uses alot of memory to use a canvas object. It's fine if its slow, I'm just wondering how it would work performance wise?

OlivierC

I'm reading on this now, although I would prefer a client-sided method since ajax isn't really fully supportive with C2 unless you know how to cross-domain or bypass all those permissions.

Does anyone know if the canvas snapshot can take an image but change all the white spots of an image to transparent?

I tried setting the canvas layer where the snapshot is taking place to transparent at "yes", but it seems when you load the canvas snapshot the image has a black background instead of a transparent one.

Lets say you have a background with rgb values at (255,255,255). So a white background. Is it possible to set pixels with (255,255,255) to transparent? Kinda like a direct conversion. If that makes sense.

You could use the canvas plugin like tulamide said, but yes it would be pretty slow as looping over all the pixels of an image in general is a slow thing to do without a gpu shader.

You can take a snapshot with a transparent background. You just need to set the bottom layer to be transparent.

Here's my test: https://dl.dropboxusercontent.com/u/5426011/examples20/snapshot_transparent.capx

R0J0hound

Much appreciated rojo! Without looking at your capx I'd probably be lost.. I did try this method, but one distinct thing I noticed from your capx file was that you had clear background set to "yes" which seems to make the transparent backgrounds event work. Without setting it to "yes" you get this funky transparent background that shows up in black. But performance-wise shouldn't it be off?

With it off the canvas isn't cleared so you'll have no transparency. First an foremost get something working and then you can look for shortcuts and speedups.

Well nonetheless, problem solved. I guess for smaller projects it barely affects your performance, so it works. Thanks rojo.

This thread can be closed.