For more information about how to use javascript to obtain the top N dominant color values of an image, refer cripttop

For more information about how to use javascript to obtain the top N dominant color values of an image, refer cripttop

Question requirements

Find the tag that appears the most frequently !!!

Personal solution:

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

Ideas:

Get all tags-cluster by Tag name-sort by weight.

If you have a better method, please feel free to contact us.

Let's take a look at this question today:

Obtain the top N primary color value of an image. The problem is similar to that of the top N labels. The data size is different, and everything else is similar.

The idea of this problem is very clear. The first step is to obtain the image data. The second step is to perform clustering based on the color value. The third step is to sort the clustering results. So this is based on this idea.

1. Data Acquisition

The getImageData () method of canvas is used to obtain the rgba data of each pixel in the image.

Var imgdatas = context. getImageData (150,150,); // obtain the current canvas data var imgdata = imgdatas. data; // obtain rgba data var I = 0, len = imgdata. length; var arr = []; // push the picture rgba data to the new array for (I; I <len; I ++ = 4) {arr. push (imgdata [I] + ',' + imgdata [I + 1] + ',' + imgdata [I + 2] + ', '+ imgdata [I + 3]);}

In this way, we can get all the data of the image, and the rest is a mathematical problem.

2. Data Clustering

Deduplicate, merge the same color value, and record the number (weight) of the color value weight

There are many clustering methods, such as mathematical statistics, k-means, decision tree, Naive Bayes, and support vector machines, however, you still need to consider the applicability and efficiency of different methods.
We will get an array [{rgba: '21, 12,45, 0', weight: 12 },{...}] to record the color value and number of occurrences,

3. Sort clustering results

Sort the json array obtained in the previous step. Sort the values of the weight attribute from large to small or from small to large. The sorting algorithm does not need to talk about it.

4. Result Preview

5. to Do

Merge similar color values

Is it necessary to combine rgba (234,234,234, 1) and rgba (234,235,235, 1) into a value, which involves similarity calculation and other issues.

Optimize Clustering Algorithms

Improves complexity, performance, and execution speed

Combined with Visualization

6. Summary

It is more appropriate to process a large amount of data on the backend. After all, you can use distributed frameworks and other multi-terminal computing.

The ability of browsers to process data is still limited.