This is the fifth day of my participation in the More text Challenge. For details, see more text Challenge

preface

A designer friend of mine wanted me to help him create a page that would generate color cards from the images, something like this:

The development of

To analyze the color composition of the picture, we need to be able to get the color information on the picture. With the popularity of HTML5 today, we can use Canvas’s getImageData to obtain the color information of the image.

**CanvasRenderingContext2D**.geTimageData () returns an ImageData object that describes the hidden pixel data in the Canvas region, which is represented by a rectangle with a starting point of _(sx, sy), _ width of _sw, and height of _sh.

After obtaining the color information, we only need to count the occurrence times of each color, and then select the colors with the most occurrence times.

Collect pixel information

export default function collectPixelData (img) {
  const canvas = document.createElement('canvas')
  const context = canvas.getContext && canvas.getContext('2d')
  context.drawImage(img, 0.0)
  const idata = context.getImageData(0.0, canvas.width, canvas.height);
  
  let curIndex = 0
  const step = 4

  const cdata = idata.data
  const arrayOfPixels = []
  while (curIndex + 4 < cdata.length) {
    const [r, g, b, a] = [cdata[curIndex], cdata[curIndex+1], cdata[curIndex+2]]
    arrayOfPixels.push([r,g,b])
  }
  return arrayOfPixels
} 
Copy the code

GetImageData returns an array of [r, G, B,a] information for each pixel. To my surprise, when I uploaded the picture and waited for the console to print the information, the page crashed 😠. Everything is difficult in the beginning. After calm thinking, I guess it may be caused by too much picture information. After that, I added a sampling logic, one out of every 10 pixels, so that I can smoothly obtain the pixel information of the picture.

while (curIndex + 4 < cdata.length) {
  const [r, g, b, a] = [cdata[curIndex], cdata[curIndex+1], cdata[curIndex+2]]
  arrayOfPixels.push([r,g,b])
  // The logic of sampling
  curIndex += 9 * 4
}
Copy the code

Pixel composition analysis

Once the pixel information is obtained, we can do statistical analysis. The code is as follows:

function rankColors(colorArr) {
  const colorMap = {}
  for (const item of colorArr) {
    const key = item.join(The '-')
    if (colorMap[key]) {
      colorMap[key] += 1
    } else {
      colorMap[key] = 1}}const colors = Object.keys(colorMap).map(item= > ({color: item.split(The '-'), count: colorMap[item]}))
    .sort((a, b) = > b.count - a.count)
  
  return {colors, totalCount: colors.length}
}
Copy the code

The final results are as follows:The pink of the face is not shown.Neither of the above results works well. Figure 1 shows that the sampling of mass-tone distribution is not accurate enough, and Figure 2 shows that the color is too scattered. After analyzing the log, it turns out that colors that look the same to the naked eye on the image have different values in the program (e.gRGB (0, 125) 和 RGB (0, 126), which leads to poor analysis and too scattered colors.

Color extraction algorithm

How to solve the above problems? One idea is that colors that are similar in color can be classified as one color, which involves the knowledge of the algorithm,Image theme color extraction algorithmThis article describes the algorithm in more detail. And then I found itquantizeThis open source library can be used to optimize the extraction of color. The optimized results are as follows:That’s accurate. At least the pink of the face has been analyzed.It’s still not quite accurate, and the red taillights aren’t on display.

Afterword.

The source address for the example above: wuse-color. In addition, there is already an open source project based on the quantize acquisition of image theme colors in the warehouse: Color-thief.

Then I found a very good website for color analysis:adobe color. The specific effects are as follows:It not only considers the color proportion, but also combined with the color position relationship to generate color card, can be said to be very good!

The resources

  • Median segmentation/MMCQ algorithm
  • Do something interesting with Canvas’s getImageData
  • How to count the proportion of various colors in a picture, what software can be achieved?
  • Those color cards that bloggers often share, you can do too
  • Algorithmic challenge: Generating color schemes from images
  • Best palette generator
  • Use ColorfulImg to get the picture theme color!
  • Color scheme generation – theory and algorithm
  • IMAGE COLOR SUMMARIZER
  • adobe color