从图像中读取透明像素

Question

有没有一种方法可以从JavaScript图像中读取透明像素？

我认为，它可能类似于PNG修复IE的东西（阅读透明像素和应用一些东西，哈哈）。但是，是的，对于每个浏览器..

啊，如果不使用HTML5就可以实现，那将是非常棒的。

Answer 1

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

但是，您可以通过使用画布获得所需的结果。如果你有一个画布，你可以给它分配一些独特的颜色（比如用于绿色屏幕的霓虹绿）。然后，您可以将图像插入到画布上，并使用提到的方法here来获取每个单独的像素。然后，您可以检查每个像素的颜色，看看该点是否与您的背景颜色相对应（如果是透明的），还是有其他颜色（不透明）。

一种骇人听闻的，但不要认为有什么你可以用纯JS做。

Answer 2

看来，GameJS可以做到这一点，甚至更多。我的任何/所有知识都参考this SO question，因为我并没有声称实际上有任何关于此主题的内容。

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

Answer 3

那么这个问题实际上是由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的信息。