Estrarre oggetti di colori specifici e convertirli in percorsi

Question

Ho un'idea per un progetto ma ho raggiunto un muro con lo sviluppo di esso. In sostanza vorrei usare JavaScript per analizzare un'immagine (qualsiasi immagine), prendere un colore specifico e mapparlo su una tela HTML5 come un percorso. Tutte le immagini analizzate saranno forme base di diversi colori. Questo è un esempio di cosa vorrei che facesse.

questo esempio è quello che vorrei lo script per fare quando passato il riferimento esagonale viola. Passandogli il blu cambierebbe l'output della tela per mostrare solo i 2 SHAPES blu. Qualcuno ha qualche idea su come questo può essere raggiunto senza l'uso di un plug-in? L'output della tela verrà a un certo punto manipolato in modo tale che ogni forma dovrà essere il suo percorso separato (in quanto non saranno sempre forme a 4 lati).

Answer 1

Per ottenere componenti di colore del pixel di coordinate (x, y) da una tela, basta fare:

// assuming second canvas is same dimensions as first one 
var secondCanvasId = context.createImageData(canvas.width, canvas.height); 
for (var x = 0; x < canvas.width; x++) { 
    for (var y = 0; y < canvas.height; y++) { 
    var pix = context.getImageData(x, y, 1, 1).data; 
    var r = pix[0]; 
    var g = pix[1]; 
    var b = pix[2]; 
    var a = pix[3]; 
    // set canvas2 (x, y) pixel with this color, if it matches the choosen color 
    if (r === color.r && g === color.g && b === color.b && a === color.a) { 
     secondCanvasId.data[0] = r; 
     secondCanvasId.data[1] = g; 
     secondCanvasId.data[2] = b; 
     secondCanvasId.data[3] = a; 
     context.putImageData(secondCanvasId, x, y); 
    } 
    } 
} 

Answer 2

Dal momento che la domanda è abbastanza ampio così com'è non mi fornire il codice, ma un approccio generale su come raggiungere questo.

Questi devono essere adottate le misure che ha bisogno:

Primo passaggio: ridurre l'immagine sulla base di un colore e di tolleranza. Se il colore è assoluto, continua semplicemente iterare e creare un canale alfa in cui il pixel non corrisponde al colore. Per tolleranza, un approccio migliore sarebbe utilizzare la conversione RGB-HSL, quindi definire un raggio e verificare se il colore letto è nel raggio del colore target. Considerare anche i valori del canale alfa.

Ciò lascerà un'immagine con un canale alfa e solo i colori che si cercano.

Secondo passaggio: Eseguire l'immagine attraverso una soluzione che utilizza l'algoritmo Piazze Marching (spudorato: ho fatto il mio here (licenza MIT) ispirata a questa domanda, e sembrano essere più veloci degli altri incl. il plugin D3 - ma chiunque lo farà!). Estrai i tracciati iterando sull'immagine, per ogni iterazione rimuovi la parte tracciata. Puoi farlo accedendo + riempiendo il percorso ottenuto usando la modalità composizione destination-out. Usa una larghezza della linea di circa 3-5 specifica per il tuo scenario.

È possibile utilizzare Ramer-Douglas-Peucker per ridurre i punti o lasciarli così come sono. Nessuna riduzione del punto consentirà un percorso preciso ma peggiorerà anche.

Terzo passaggio: Ora si dispone di dati di percorso che è possibile utilizzare per ritagliare le parti dall'immagine originale. Aggiungi tutti i dati del percorso (usa i percorsi secondari usando moveTo() per ogni percorso), quindi la modalità composizione per rimuovere i pixel che non vuoi. Oppure, se sei solo dopo i percorsi: hai finito!