Effetto looping dei pixel in un'immagine

Question

Il mio progetto consiste nell'inserire un'immagine in un tag canvas in una pagina HTML e quindi eseguire il loop dei pixel e dei valori RGBA dei pixel. Durante il looping dei valori rossi, quindi ogni quarto valore nel pixel, voglio registrare la posizione dei pixel che rappresentano un pixel bianco. Ora, ho l'immagine che si carica con un po 'di codice che ho ricevuto da questo blog, http://www.phpied.com/photo-canvas-tag-flip/.

Ha un altro post in cui fornisce del codice su come eseguire il ciclo dei pixel e registrare le informazioni che voglio registrare, ma non lo capisco, e non voglio copiare il suo codice senza sapere cosa sto facendo Quindi qualcuno potrebbe per favore o spiegare il metodo che sta usando o forse mostrarmi un altro modo per fare quello che sta facendo? Questo è il link all'altro post http://www.phpied.com/pixel-manipulation-in-canvas/.

Answer 1

È semplice.

Tutti i dati dei pixel per una tela vengono memorizzati in sequenza in una matrice.

I dati del primo pixel occupano gli elementi di matrice # 0-3 (rosso = 0/verde = 1/blu = 2/alfa = 3).

I dati del secondo pixel occupano gli elementi di matrice # 4-7 (rosso = 4/verde = 5/blu = 6/alfa = 7).

E così via ...

È possibile caricare i dati che i pixel mediante context.getImageData() e l'enumerazione attraverso l'array.

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

È inoltre possibile modificare tali valori di matrice e quindi salvare la matrice di nuovo all'immagine utilizzando context.putImageData().

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

context.putImageData(imgData, 0, 0); 

L'immagine verrà quindi modificata in base alle modifiche apportate al suo array di pixel.

Answer 2

Ti consiglio di utilizzare un framework di elaborazione immagini per concentrarti sugli algoritmi invece di manipolare matrici di valori. Alcuni quadri:

• fabric.js
• processing.js
• MarvinJ

Nel caso di MarvinJ, si può semplicemente scorrere pixel iterazione colonna e le coordinate di riga. Uso i metodi getIntComponentX() per accedere ai componenti del colore.

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

Pertanto non è necessario preoccuparsi di come vengono rappresentati i dati dei pixel. Al fine di verificare se un pixel è bianco:

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

Runnable Esempio:

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>