在圖像中循環遍歷像素

Question

我的項目是將圖像輸入到HTML頁面的畫布標記中，然後遍歷像素的像素和RGBA值。在遍歷紅色值的過程中，每隔四個像素值，我想記錄代表白色像素的像素的位置。現在，我已經加載了一些代碼，我從這個博客中獲得了一些代碼，http://www.phpied.com/photo-canvas-tag-flip/。

他有另一篇文章，他給出了一些關於如何遍歷像素並記錄我想記錄的信息的代碼，但我不明白，我不想在不知道的情況下複製他的代碼我在做什麼。那麼任何人都可以請他解釋他正在使用的方法，或者讓我知道他正在做什麼的另一種方式？這是鏈接到其他帖子http://www.phpied.com/pixel-manipulation-in-canvas/。

Answer 1

這很簡單。

畫布的所有像素數據都按順序存儲在一個數組中。

第一個像素的數據佔用數組元素＃0-3（紅色= 0 /綠色= 1 /藍色= 2/alpha = 3）。

第二個像素的數據佔用了數組元素＃4-7（red = 4/green = 5/blue = 6/alpha = 7）。

等等...

可以通過使用context.getImageData加載的像素數據（）和通過陣列枚舉。

var imgData = context.getImageData(0,0,canvas.width,canvas.height); 
var data = imgData.data; 

// enumerate all pixels 
// each pixel's r,g,b,a datum are stored in separate sequential array elements 

for(var i=0; i<data.length; i+=4) { 
    var red = data[i]; 
    var green = data[i+1]; 
    var blue = data[i+2]; 
    var alpha = data[i+3]; 
} 

您也可以更改這些數組值，然後使用context.putImageData（）將數組保存回圖像。

// save any altered pixel data back to the context 
// the image will reflect any changes you made 

context.putImageData(imgData, 0, 0); 

然後圖像將根據您對其像素陣列所做的更改而改變。

Answer 2

我建議您使用圖像處理框架，以專注於算法而不是操作數組值。一些框架：

• fabric.js
• processing.js
• MarvinJ

在MarvinJ的情況下，你可以簡單地通過循環迭代像素列和行座標。我使用方法getIntComponentX（）來訪問顏色組件。

for(var y=0; y<image.getHeight(); y++){ 
    for(var x=0; x<image.getWidth(); x++){ 
     var red = image.getIntComponent0(x,y); 
     var green = image.getIntComponent1(x,y); 
     var blue = image.getIntComponent2(x,y); 
    } 
} 

因此，您不必擔心像素數據是如何表示的。爲了檢查一個像素是白色：

// Is white? 
if(red >= 250 && blue >= 250 && green >= 250){ 
    console.log("Pixel at "+x+","+y+" is white"); 
} 

Runnable的實例：

var canvas = document.getElementById("canvas"); 
 
image = new MarvinImage(); 
 
image.load("https://i.imgur.com/eLZVbQG.png", imageLoaded); 
 

 
function imageLoaded(){ 
 
    
 
    var whitePixels=0; 
 
    for(var y=0; y<image.getHeight(); y++){ 
 
    for(var x=0; x<image.getWidth(); x++){ 
 
     var red = image.getIntComponent0(x,y); 
 
     var green = image.getIntComponent1(x,y); 
 
     var blue = image.getIntComponent2(x,y); 
 
     var alpha = image.getAlphaComponent(x,y); 
 
     
 
     // Is white? 
 
     if(red >= 250 && green >= 250 && blue >= 250 && alpha > 0){ 
 
     whitePixels++; 
 
     } 
 
    } 
 
    } 
 
    
 
    image.draw(canvas); 
 
    
 
    document.getElementById("result").innerHTML = "white pixels: "+whitePixels; 
 
}

<script src="https://www.marvinj.org/releases/marvinj-0.7.js"></script> 
 
<canvas id="canvas" width="500" height="344"></canvas> 
 
<div id="result"></div>