Dieses Mal stelle ich Ihnen die Top-N-Farbwertmethode von JS vor, um den Top-N-Farbwert des Bildes zu erhalten. Was sind die Vorsichtsmaßnahmen, um den Top-N-Farbwert des Bildes mit JS zu erhalten? . Hier ist ein praktischer Fall, werfen wir einen Blick darauf.
Fragenanforderungen
Finden Sie das Tag heraus, 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 Daten des Bildes zu ermitteln Der dritte Schritt besteht darin, die Clustering-Ergebnisse zu sortieren. Dieses Mal werden wir es also basierend auf dieser Idee umsetzen.
1. Datenerfassung
Die Bilddatenerfassung verwendet die getImageData()-Methode von Canvas, mit der der RGBA jedes Pixels ermittelt werden kann die Bilddaten.
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]+','+imgdata[i+1]+','+imgdata[i+2]+','+imgdata[i+3]);
}Auf diese Weise können Sie alle Daten des Bildes abrufen, der Rest ist ein mathematisches Problem.
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 glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!
Empfohlene Lektüre:
Animation im Miniprogramm implementieren
So erhalten Sie OpenID- und Benutzerinformationen per Miniprogramm
Detaillierte Erklärung der Verwendung von jquery zum Erstellen von Karussellbildern auf dem PC
Das obige ist der detaillierte Inhalt vonJS-Methode zum Erhalten der besten N Farbwerte eines Bildes. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
