从图像中读取透明像素

Question

有没有办法使用javascript从图片中读取透明像素？

我认为，这可能类似于 PNG 修复对 IE 所做的事情（读取透明像素并应用一些东西，哈哈）。但是，是的，对于每个浏览器......

啊，如果不用 HTML5 也能实现，那就太棒了。

Answer 1

这个问题实际上是由来自 GoogleTechTalks 的家伙在这个关于基于 javascript 的游戏引擎的视频中回答的。
http://www.youtube.com/watch?feature=player_detailpage& ;v=_RRnyChxijA#t=1610s
它应该从解释的地方开始。

编辑：
因此，我将总结视频中讲述的内容并提供一个代码示例。
这比我预想的要困难得多。诀窍是将图像加载到画布上，然后检查每个像素是否透明。数据被放入二维数组中。就像 alphaData[pixelRow][pixelCol] 一样。 0 表示透明度，而 1 则不表示。当 alphaData 数组完成后，它被放入全局变量 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;
    }
}

我在 Firefox 中本地运行时遇到错误，try catch 语句解决了这个问题。哦，我要吃东西......

编辑2：
所以我吃完了晚餐，我想添加一些我使用过的资源，这可能会有所帮助。

https://developer.mozilla.org/En/HTML/Canvas/Pixel_manipulation_with_canvas
有关 imageData 对象的信息。

http://blog.nihilogic.dk/2008/05 /compression-using-canvas-and-png.html
有关 imageData 对象及其用途的更多信息。

http://www.nihilogic.dk/labs/canvascompress/pngdata.js
这是使用 imageData 的一个非常有用的示例，我提供的代码在很大程度上与此类似。

http://www.youtube.com/watch?v=_RRnyChxijA
有关用 javascript 编写游戏引擎脚本的信息，真的非常有趣。

http://blog.project-sierra.de/archives/1577
有关在 Firefox 中使用 enablePrivilege 的信息。

Answer 2

这是一个有点棘手的问题，因为直接从 Javascript 访问文件的唯一方法是使用 FileReader，这是一个相对较新的功能，大多数浏览器尚不支持。

但是，您可以通过使用画布获得所需的结果。如果您有画布，您可以为其指定一些独特的颜色（例如绿色屏幕中使用的霓虹绿）。然后，您可以将图像插入到画布上，并使用此处提到的方法来获取每个单独的像素。然后您可以检查每个像素的颜色，看看该点是否对应于您的背景颜色（因此它是透明的）或者是否具有其他颜色（不透明）。

有点 hackish，但不要认为你可以用纯 JS 做任何其他事情。

Answer 3

看来 GameJS 可以做到这一点，甚至更多。我正在为任何/所有引用这个SO问题据我所知，因为我并不声称自己真正了解这个主题。

当然，这是 HTML5，并使用 canvas 元素。