Applet image processing: picture color matching analysis

background

The canvas of the applet is encapsulated by WeChat based on native components, so the interface is quite different from the canvas of the web. In the early days, it did not support pixel-level processing capabilities.
In the 1.9.0 version update of the small program basic library at the beginning of 18, wx.canvasGetImageData和wx.canvasPutImageDatatwo important APIs appeared , which complemented the pixel processing capabilities. Therefore, it is possible for the small program to process images on the client.
For details, please refer to:
The heavy function of secretly iterating --- the pixel processing ability of the
applet wx.canvasGetImageData

Picture color matching analysis applet: small color card

In order to try the image processing ability of the applet, I made a applet for the color matching analysis of the picture-small color card.
The main function is: the user selects a picture, the program will analyze the color of the picture, and display the color as a color card to the user. Users can save, edit and copy their own color cards. This feature is helpful for beginner UI designers (maybe ...).
Source code: github: mini-color-card
experience applet:

principle

The main steps of the color matching analysis of the applet are as follows:

1. The user selects the picture and draws it on the canvas after getting the imgPath.
2. Read image data through wx.canvasGetImageData interface
3. Pre-process the image data to eliminate the points with small alpha and not white. (Non-essential)
4. Cluster image pixel data. The color of each pixel can be viewed as a three-dimensional vector.

The basic logic is as follows:

wx.chooseImage({
  count: 1,
  sizeType: ['original', 'compressed'],
  sourceType: ['album', 'camera'],
  success: (res) => {
    wx.getImageInfo({
      src: res.tempFilePaths[0],
      success: (imgInfo) => {
        let {
          width,
          height,
          imgPath
        } = imgInfo;
        let ctx = wx.createCanvasContext(this.canvasID);
        ctx.drawImage(imgPath,0,0,width,height);
        ctx.draw(false,()=>{
          wx.canvasGetImageData({
            canvasId: this.canvasID,
            x: 0,
            y: 0,
            width: width,
            height: height,
            success(res) {
              var pixels = res.data;
              var pixelCount = width*height;
              var pixelArray = [];
              // 对像素数据进行预处理
              for (var i = 0, offset, r, g, b, a; i < pixelCount; i = i + quality) {
                offset = i * 4;
                r = pixels[offset + 0];
                g = pixels[offset + 1];
                b = pixels[offset + 2];
                a = pixels[offset + 3];
                if (a >= 125) {
                  if (!(r > 250 && g > 250 && b > 250)) {
                    pixelArray.push([r, g, b]);
                  }
                }
              }
              var cmap = MMCQ.quantize(pixelArray, colorCount);//聚类，MMCQ是个用于图像分析的库
              var palette = cmap ? cmap.palette() : null;
              console.log('配色为：',palette);
            }
          })
        })
      }
    })
  }
})

summary

At the beginning, I didn't want to display the canvas, I just wanted to use it to get the image content, but it is not feasible in practice. The canvas of the applet does not allow off-screen rendering. If you want to use it for image processing, you must honestly use it for display.
Here only practice wx.canvasGetImageDatareading data for image analysis, but in combination wx.canvasPutImageData, image processing such as filters should be able to do. The imagination of small programs is quite large.

This article is reproduced in: Small program image processing: picture color matching analysis