从图像中读取透明像素

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做任何其他事情.