Because of canvas cross-origin restrictions, if the image is hosted on a domain other than vinking.top, no output will be produced.

When I was sampling colors on a color-picking site, I noticed it could extract the dominant color of a background image. I kept wondering how it worked; after a night of digging, I finally figured out the principle.

Following the “if it works, ship it” philosophy—and with help from online experts—I wrote a tool that can grab an image’s dominant colors. Apart from a few odd issues I was too lazy to fix [DarkBText]actually, I just don’t know how[/DarkBText], it runs fine. The core idea is the same as algorithms that reduce image bit depth in image processing: median-cut.

The so-called median-cut is actually very simple. First, build a 3-D RGB space and place every pixel color of the image into it. Next, draw the smallest 3-D RGB box that encloses all those pixels. Third, find the longest edge of that box and cut it at the median so the two new boxes each contain half the pixels. Repeat the third step until the number of boxes equals the desired number of dominant colors. Finally, average the pixel colors inside each little box to get the dominant colors for the image. Why cut? Cutting keeps similar colors evenly distributed inside each box, so when we average at the end, one average color can represent the whole region.

Simple, right? Right? RIGHT?

You can check out the code from the CSDN expert 业余_玩家; original post: https://blog.csdn.net/qq_28401309/article/details/104209199.

This method is freaking awesome!