So erhalten Sie die Top-N-Hauptfarbwerte eines Bildes in Javascript

Dieser Artikel ist eine detaillierte Erklärung und Codefreigabe über die Methode zum Erhalten der Top-N-Hauptfarbwerte eines Bildes mithilfe von JavaScript. Interessierte Freunde können darauf verweisen.

Fragenanforderungen

Finden Sie das Tag, das am häufigsten auf einer Seite erscheint! ! !

Persönliche Lösung:

var eles = document.getElementsByTagName('*');
var rs = [];
for(var i=0; i<eles.length; i++) {
  var tag_name = eles[i].tagName.toLowerCase();
  if(undefined != tag_name) {
    if(inJsonArray(rs, tag_name)) {
      addWeight(rs, tag_name);
    }else {
      rs.push({
        tag : tag_name,
        weight : 1
      })
    }        
  }      
}
SortByWeight(rs);

Idee:

Alle Tags abrufen – nach Tag-Namen gruppieren – nach Gewicht sortieren.

Wenn es einen besseren Weg gibt, teilen Sie ihn bitte mit.

Schauen wir uns die heutige Frage an:

Das Ermitteln der obersten N-Hauptfarbwerte eines Bildes ist dem Problem mit den meisten oben genannten Etiketten sehr ähnlich. Es gibt einen Unterschied in den Daten Größe, aber alles andere ist gleich.

Die Idee dieses Problems ist sehr klar. Der erste Schritt besteht darin, die Bilddaten zu erhalten. Der dritte Schritt besteht darin, die Clusterergebnisse zu sortieren . Dieses Mal werden wir es also basierend auf dieser Idee umsetzen.

1. Datenerfassung

Die Bilddatenerfassung verwendet die Methode getImageData() von Canvas, mit der die RGBA-Daten jedes Pixels des Bildes abgerufen werden können.

var imgdatas=context.getImageData(0,0,150,150);//获取当前canvas数据
var imgdata = imgdatas.data;//获取rgba数据
var i = 0, len = imgdata.length;
var arr = [];
//将图片rgba数据push到新数组中
for(i ; i<len ; i+=4 ) {
  arr.push(imgdata[i]+&#39;,&#39;+imgdata[i+1]+&#39;,&#39;+imgdata[i+2]+&#39;,&#39;+imgdata[i+3]);  
}

Auf diese Weise können Sie alle Daten des Bildes abrufen, und der Rest ist eine mathematische Aufgabe.

2. Daten-Clustering

Duplikate entfernen, gleiche Farbwerte zusammenführen, Anzahl (Gewicht) des Farbwertgewichts aufzeichnen

Clustering Dort Es gibt viele Methoden, darunter direkte mathematische Statistik oder K-Means, Entscheidungsbäume, Naive Bayes, Support-Vektor-Maschinen usw. Sie können jede beliebige verwenden, müssen aber dennoch die Anwendbarkeit und Effizienz verschiedener Methoden berücksichtigen.
Wir erhalten ein solches Array [{rgba: '21,12,45,0', Gewicht: 12}, {...}], um den Farbwert und die Anzahl der Vorkommen aufzuzeichnen,

3. Sortieren der Clustering-Ergebnisse

Sortieren Sie das im vorherigen Schritt erhaltene JSON-Array von groß nach klein oder von klein nach groß entsprechend dem Wert der Attributgewichtung Algorithmus.

4. Ergebnisvorschau

5. Zu tun

Ähnliche Farbwerte Ist es notwendig,

rgba(234,234,234,1) und rgba(234,235,235,1) zu einem Wert zusammenzuführen? Dazu gehören auch Probleme wie die Ähnlichkeitsberechnung.

Optimieren Sie den Clustering-Algorithmus

Erhöhen Sie Komplexität, Leistung und Ausführungsgeschwindigkeit

Kombiniert mit einigen Visualisierungsdingen

Zusammenfassung

Für die Verarbeitung großer Datenmengen ist es sinnvoller, diese im Backend zu platzieren. Schließlich können Multi-End-Computing wie verteilte Frameworks verwendet werden.

Die Fähigkeit des Browsers, Daten zu verarbeiten, ist noch eingeschränkt.

Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

Grundlegendes internes Methodendiagramm von Object in JavaScript (grafisches Tutorial)

So verwenden Sie ztree in Vue (Details Tutorial)

So implementieren Sie das Wasserfall-Flow-Plug-in mit JS

So implementieren Sie die Pasteboard-Kopierfunktion mit JS

So implementieren Sie versetzte und einheitliche Animationen in JS

So implementieren Sie in Tabellen zusammengeführte Zellen in Bootstrap

Das obige ist der detaillierte Inhalt vonSo erhalten Sie die Top-N-Hauptfarbwerte eines Bildes in Javascript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!