Due to the cross-origin issue with canvas, if the image is from a domain other than vinking.top, it will not be able to output.

Previously, when I was on a color extraction website, I saw that the site could obtain the main colors of the background image and I've always wanted to figure out how it was done. After a night of exploration, I finally understood the principle behind it.

Following the principle of making it work, and with the help of online experts, I wrote a tool that can obtain the main colors of an image. Apart from some strange issues I'm too lazy to solve [DarkBText] actually, I don't know how to [/DarkBText], it can still run normally. Like the algorithms used to reduce the bit depth of images, their core principle is the Median Cut method.

The so-called Median Cut method is quite simple. First, establish a three-dimensional RGB space and place all the pixel colors of the image into this RGB space. Then, draw a three-dimensional RGB region that includes all the pixel colors of the image. The third step is to take the longest edge of this RGB region for median cutting, ensuring that the two new RGB regions after the cut contain the same pixel points. Then, repeatedly perform the third step until the number of cuboids cut out equals the number of main colors of the image. Finally, take the average value of the pixels in the small cuboid region as the main color of the image. The reason for cutting is to try to distribute similar colors evenly within the cuboid, so that when taking the average value, a single average color can represent the color of the entire region.

Isn't it simple? Isn't it! Isn't it!

The code can refer to the expert on CSDN Amateur_Player, the source of the code: https://blog.csdn.net/qq_28401309/article/details/104209199.

This method is really awesome!