Read transparent pixels from image

Question

Is there a way to read transparent pixels from an image using javascript?

I think this may be something similar to what PNG does for IE (reading transparent pixels and applying some things, lol). But yes, for every browser.

Ah, it would be great if this were possible without HTML5.

Answer 1

This is a bit of a tricky issue, as the only file access directly from Javascript is using FileReader, which is a relatively new feature and is not yet supported in most browsers.

However, you can get the desired result using the canvas. If you have a canvas, you can give it some distinctive color (for example, the green color of neon used in green screens). You can then paste the image onto the canvas and use the method mentioned here to get each individual pixel. Then you can check the color of each pixel and see if this point matches the color of your background (ergo is transparent) or has a different color (not transparent).

Kind of hacks, but don’t think that you can do anything else with pure JS.

Answer 2

Well, this guy from GoogleTechTalks answers this question in this video on javascript-based game engines. http://www.youtube.com/watch?feature=player_detailpage&v=_RRnyChxijA#t=1610s It should start where it is explained.

Edit: Therefore, I will summarize what is said in the video, and give an example code. It was a lot harder than I expected. The trick is to upload the image to the canvas, and then check every pixel if it is transparent. Data is placed in an array with two dimensions. Like alphaData [pixelRow] [pixelCol]. A 0 represents transparency, but 1 does not. When the alphaData array is complete, it is placed in the global var a.

var a; function alphaDataPNG(url, width, height) { var start = false; var context = null; var c = document.createElement("canvas"); if(c.getContext) { context = c.getContext("2d"); if(context.getImageData) { start = true; } } if(start) { var alphaData = []; var loadImage = new Image(); loadImage.style.position = "absolute"; loadImage.style.left = "-10000px"; document.body.appendChild(loadImage); loadImage.onload = function() { c.width = width; c.height = height; c.style.width = width + "px"; c.style.height = height + "px"; context.drawImage(this, 0, 0, width, height); try { try { var imgDat = context.getImageData(0, 0, width, height); } catch (e) { netscape.security.PrivilegeManager.enablePrivilege("UniversalBrowserRead"); var imgDat = context.getImageData(0, 0, width, height); } } catch (e) { throw new Error("unable to access image data: " + e); } var imgData = imgDat.data; for(var i = 0, n = imgData.length; i < n; i += 4) { var row = Math.floor((i / 4) / width); var col = (i/4) - (row * width); if(!alphaData[row]) alphaData[row] = []; alphaData[row][col] = imgData[i+3] == 0 ? 0 : 1; } a=alphaData; }; loadImage.src = url; } else { return false; } } 

I had errors when starting local in Firefox, and the try catch statement solved it. Oh, I have to eat ...

Edit 2: So, I finished my lunch, I would like to add some sources that I used, and which may be useful.

https://developer.mozilla.org/En/HTML/Canvas/Pixel_manipulation_with_canvas imageData object information.

http://blog.nihilogic.dk/2008/05/compression-using-canvas-and-png.html Even more information about the imageData object and its use.

http://www.nihilogic.dk/labs/canvascompress/pngdata.js A really useful example of using imageData, the code I provided is very similar to this for the most part.

http://www.youtube.com/watch?v=_RRnyChxijA Information about script game engines in javascript is really very interesting.

http://blog.project-sierra.de/archives/1577 Information on using enablePrivilege in firefox.

Answer 3

It seems that GameJS can do this, and much, much more. I refer to this SO question for any / all of my knowledge, since I do not pretend to really have any questions on this topic.

Of course, this is HTML5 and uses the canvas element.