Görüntüdeki piksellerle döngü

Question

Projem, bir HTML sayfasındaki bir tuval etiketine bir resim girmek ve ardından piksellerin pikselleri ve RGBA değerleri arasında geçiş yapmaktır. Kırmızı değerler arasında döngü yaparken, pikseldeki her dördüncü değerde, beyaz pikseli temsil eden piksellerin konumunu kaydetmek istiyorum. Şimdi, bu blogdan aldığım bazı kodlarla resim yükleniyorum, http://www.phpied.com/photo-canvas-tag-flip/.

Pikseller arasında nasıl döngü yapılacağına ve oturum açmak istediğim bilgileri günlüğe kaydetmeye ilişkin bazı kodlar verdiği başka bir gönderi var, ancak bunu anlamıyorum ve kodunu bilmeden kopyalamak istemiyorum. ben ne yapıyorum. Öyleyse kimse ya kullandığı yöntemi açıklayabilir mi, belki de bana yaptığını yapmak için başka bir yol gösterebilir mi? Bu, diğer postayla http://www.phpied.com/pixel-manipulation-in-canvas/ arasındaki bağlantıdır.

Answer 1

Bu basittir.

Bir kanvas için tüm piksel verileri bir dizide sırayla depolanır.

İlk pikselin verileri, # 0-3 dizi elemanlarını işgal eder (kırmızı = 0/yeşil = 1/mavi = 2/alfa = 3).

İkinci pikselin verileri, # 4-7 dizi elemanlarını işgal eder (kırmızı = 4/yeşil = 5/mavi = 6/alfa = 7). Sen context.getImageData kullanarak bu piksel verilerini yükleyebilirsiniz

Ve daha neler ...() ve dizinin numaralandırılıyor.

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]; 
} 

Ayrıca, bu dizi değerlerini değiştirmek ve sonra context.putImageData kullanarak görüntüye geri diziyi kaydedebilirsiniz().

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

context.putImageData(imgData, 0, 0); 

Görüntü, piksel dizisine yaptığınız değişikliklere göre değişecektir.

Answer 2

Değer dizilerini değiştirmek yerine algoritmalara odaklanmak için bir görüntü işleme çerçevesi kullanmanızı öneririm. Bazı çerçeveler: MarvinJ durumunda

• fabric.js
• processing.js
• MarvinJ

, sadece piksel döngü sütunu yineleme ve satır koordine eder. Renk bileşenlerine erişmek için getIntComponentX() yöntemlerini kullanıyorum.

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); 
    } 
} 

Bu nedenle piksel verilerinin nasıl temsil edildiği konusunda endişelenmeniz gerekmez.

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

Runnable Örnek:

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>