Heim > Artikel > Web-Frontend > So erhalten Sie die obersten N Hauptfarbwerte eines Bildes in Javascript
Kennt jemand die Methode, mit JavaScript die obersten N Hauptfarbwerte eines Bildes zu ermitteln? In diesem Artikel erfahren Sie, wie Sie mithilfe von JavaScript die obersten N-Hauptfarbwerte eines Bildes ermitteln.
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 sortieren zu gewichten.
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, 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 Zusammenführen
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
Verbessern Sie die Komplexität, verbessern Sie die Leistung und verbessern Sie die Ausführungsgeschwindigkeit
Kombiniert mit einigen Visualisierungsdingen
6. Zusammenfassung
Es ist sinnvoller, große Datenmengen im Backend zu verarbeiten.
Die Fähigkeit des Browsers, Daten zu verarbeiten, ist noch eingeschränkt.
Verwandte Empfehlungen:
Einführung in die Methode zum Erhalten der Hauptfarbe eines Bildes mit PHP
Das obige ist der detaillierte Inhalt vonSo erhalten Sie die obersten N Hauptfarbwerte eines Bildes in Javascript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!