When making music Webapp, I was amazed by the playing interface of a local music player (soft listen) of Tencent (as shown below), so I decided to ‘copy’ it.

The first thing that comes to mind is to draw the canvas and use getImageData to extract data and then analyze to get the theme color, because the QQ music API encountered cross-domain problems. After solving the cross-domain problem (see the cross-domain issues here for specific methods), the next problem is how to extract the theme color. The general algorithms for color extraction are these

  • Magic number method
  • Octree extraction method
  • Minimum interpolation method
  • Median segmentation
  • clustering
  • . Specific look at these two picture theme color extraction algorithm summary image theme color extraction algorithm

Next, we will introduce several js plug-ins for color extraction

1.rgbaster.js

Making the address. This is a small script that can extract the primary and secondary colors of an image.

use

It must be introduced first, and then code

const img = document.querySelector('img'); // const img ='http://example.com/image.jpg'; PaletteSize: 30, // Exclude: [rgbaster.colors (img, {paletteSize: 30, // exclude: ['RGB (255255255)..'rgb(0,0,0)' ],
     success: function(payload) {
        console.log('Dominant color:',payload.dominant); // The extracted main color console.log('Secondary color:', payload.secondary); / / time color console. The log ('Palette:', payload.palette); // Color palette}})Copy the code

The extracted result is an RGB value


const c = payload.dominant.match(/\d+/g);
const Color = `rgba(${c[0]}.${c[1]}.${c[2]}`, 0.8);Copy the code

If the color is dark, the black font is not clear. The color of the text has to be reversed with the background color. We can convert RGB value to gray value to judge the color

letfontColor; Const grayLevel = c[0] * 0.299 + c[1] * 0.587 + C [2] * 0.114;if(grayLevel >= 192) {// If it is light color, set the text to black fontColor ='# 000';
      } else {
        fontColor = '#fff';
      }Copy the code

I used this plugin in my project, and here’s what happened

Play interface

For those interested in the project click here 👉 project address

Finally, here are two more color extraction plug-ins

2.Color Thief

The project address

use
Const img = document.querySelector(const img = document.querySelector('img'); var colorThief = new ColorThief(); console.log(colorThief.getColor(img)); } // var color = new colorThief (); colorThief.getPalette(sourceImage, 8);Copy the code
The results of

3.vibrant.js

Extract a prominent color from the image. Vibrant. Js is a JavaScript port from the awesome Palette class in the Android support library. The project address

use
const img = document.querySelector('img');
var vibrant = new Vibrant(img);
    var swatches = vibrant.swatches()
    for (var swatch in swatches)
        if (swatches.hasOwnProperty(swatch) && swatches[swatch])
            console.log(swatch, swatches[swatch].getHex())Copy the code

The above three samples are the results obtained from the same picture. Let’s take a look at the horizontal comparison

In the preliminary test, the color extracted by rGBaster was the closest, but in some cases the deviation was a little far in the project test. Vibrant. Js focuses on extracting and classifying images into different colors, as shown in the sample, which can be dark, light, or prominent, while rGBaster is the best way to extract theme colors.

Note: these three plug-ins all draw pictures to canvas to obtain picture data. If the pictures are not homologous, they will not be used

The above is the article to share, welcome to leave a message to learn from each other ~