Comment obtenir les N principales valeurs de couleur principales d'une image en javascript

Cet article est une explication détaillée et un partage de code sur la méthode d'obtention des N principales valeurs de couleur​​d'une image à l'aide de JavaScript. Les amis intéressés peuvent s'y référer.

Exigences des questions

Trouvez la balise qui apparaît le plus souvent sur une page ! ! !

Solution personnelle :

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

Idée :

Obtenir toutes les balises --regrouper en fonction du nom de la balise --- trier en fonction du poids.

S'il existe une meilleure façon, partagez-la.

Regardons la question d'aujourd'hui :

L'obtention des N principales valeurs de couleur​​d'une image est très similaire au problème avec le plus grand nombre d'étiquettes ci-dessus. Il y a une différence dans les données. taille, mais tout le reste est pareil.

L'idée de​​ce problème est très claire. La première étape consiste à obtenir les données de l'image ; la deuxième étape consiste à regrouper en fonction de la valeur de couleur ; la troisième étape consiste à trier les résultats du regroupement ; . Cette fois, nous allons donc le mettre en œuvre sur la base de cette idée.

1. Acquisition de données

L'acquisition de données d'image utilise la méthode getImageData() du canevas, qui peut obtenir les données rgba de chaque pixel de l'image.

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

De cette façon, vous pouvez obtenir toutes les données de l'image, et le reste est un problème mathématique.

2. Regroupement des données

Supprimer la duplication, fusionner les mêmes valeurs de couleur, enregistrer le numéro (poids) du poids de la valeur de couleur

Clustering là Il existe de nombreuses méthodes, y compris les statistiques mathématiques directes, ou k-moyennes, les arbres de décision, les Bayes naïfs, les machines à vecteurs de support, etc. Vous pouvez utiliser celle que vous voulez, mais vous devez toujours considérer l'applicabilité et l'efficacité des différentes méthodes.
Nous obtiendrons un tel tableau [{rgba : '21,12,45,0', poids : 12}, {...}] pour enregistrer la valeur de couleur et le nombre d'occurrences,

3. Tri des résultats de clustering

Triez le tableau json obtenu à l'étape précédente de grand à petit ou de petit à grand selon la valeur du poids de l'attribut Inutile de préciser le tri. algorithme.

4. Aperçu du résultat

5. Est-il nécessaire de fusionner

rgba(234,234,234,1) et rgba(234,235,235,1) en une seule valeur ? Cela impliquera également des problèmes tels que le calcul de similarité ?

Optimiser l'algorithme de clustering

Augmenter la complexité, les performances et la vitesse d'exécution

Combiné avec des éléments de visualisation

Résumé

6.

Pour le traitement de grandes quantités de données, il est plus approprié de les placer sur le backend. Après tout, l'informatique multi-extrémité telle que les frameworks distribués peut être utilisée.

La capacité du navigateur à traiter les données est encore limitée.

J'ai compilé ce qui précède pour vous, j'espère que cela vous sera utile à l'avenir.

Articles associés :

Schéma de méthode interne de base d'Object en JavaScript (tutoriel graphique)

Comment utiliser ztree dans vue (détails Tutoriel)

Comment implémenter le plug-in Waterfall Flow à l'aide de JS

Comment implémenter la fonction de copie de table de montage à l'aide de JS

Comment implémenter une animation offset et uniforme dans JS

Comment implémenter des cellules fusionnées dans un tableau dans Bootstrap

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!