小程序圖像處理：圖片配色分析

背景

小程序的canvas是微信基於原生組件自行封裝的，因此接口跟web的canvas有不少區別，早期更是沒有支持像素級的處理能力。
在18年初的小程序基礎庫1.9.0版本更新中，出現了wx.canvasGetImageData和wx.canvasPutImageData兩個重要的API，補全了像素處理能力，因此，小程序在客戶端進行圖片處理成爲了可能。
具體可以參考：
偷偷迭代的重磅功能---小程序的像素處理能力
wx.canvasGetImageData

圖片配色分析小程序：小色卡

爲了嘗試小程序的圖像處理能力，我做了個用於圖片配色分析的小程序-小色卡。
功能主要是：用戶選擇一張圖片，程序會分析圖片的配色，並把配色展示爲一張色卡給用戶。用戶可以保存、編輯、複製自己的色卡。這個功能對初級的UI設計師有一定的幫助（可能吧...）。
源碼：github：mini-color-card
體驗小程序：

原理

小程序實現配色分析主要步驟如下：

1. 用戶選擇圖片，拿到imgPath後繪製到canvas上。
2. 通過wx.canvasGetImageData這個接口讀取圖片數據
3. 對圖片數據進行預處理，剔除alpha比較小並且不是白色的點。（非必要）
4. 對圖片像素數據進行聚類。每個像素的顏色可以作爲一個三維向量來看。

基本邏輯如下：

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);
            }
          })
        })
      }
    })
  }
})

小結

一開始我是不想把canvas顯示出來的，只想用它獲取圖像內容，但是實踐下來是不可行的。小程序的canvas並不允許離屏渲染，想要用它進行圖片處理，就要老老實實用它進行展示。
這裏只實踐了wx.canvasGetImageData讀取數據進行圖像分析，不過結合wx.canvasPutImageData，濾鏡之類的圖像處理應該都是可以做了。小程序的想象空間還是挺大的。