從圖像中讀取透明像素

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的信息。