背景

アプレットのキャンバスはネイティブコンポーネントに基づいてWeChatによってカプセル化されているため、インターフェイスはWebのキャンバスとはかなり異なり、初期の段階ではピクセルレベルの処理機能をサポートしていませんでした。
18の初めの小さなプログラムの基本ライブラリの1.9.0バージョンの更新ではwx.canvasGetImageData和wx.canvasPutImageData、ピクセル処理機能を補完する2つの重要なAPI が登場したため、小さなプログラムがクライアントで画像を処理することが可能です。
詳細については、次を参照してください。
密かに反復する重い機能--- アプレットのピクセル処理能力
wx.canvasGetImageData

画像のカラーマッチング分析アプレット：小さなカラーカード

アプレットの画像処理能力を試すために、小形カラーカードのカラーマッチング分析用のアプレットを作りました。
主な機能は次のとおりです。ユーザーが画像を選択すると、プログラムは画像のカラーマッチングを分析し、カラーマッチングとしてカラーマッチングをユーザーに表示します。ユーザーは自分のカラーカードを保存、編集、コピーできます。この機能は、初心者のUIデザイナー（多分...）に役立ちます。
ソースコード：github：ミニカラーカード
エクスペリエンスアプレット：
小さなカラーカード

原理

アプレットのカラーマッチング分析の主な手順は次のとおりです。

ユーザーは画像を選択し、imgPathを取得した後でキャンバスに描画します。
wx.canvasGetImageDataインターフェースを介して画像データを読み取る
画像データを前処理して、白ではなく小さなアルファを持つポイントを削除します。（非必須）
クラスタ画像のピクセルデータ。各ピクセルの色は、3次元のベクトルとして表示できます。

基本的なロジックは次のとおりです。

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

まとめ

最初はキャンバスを表示するのではなく、画像コンテンツを取得するために使用したかったのですが、実際には実現可能ではありませんでした。アプレットのキャンバスはオフスクリーンレンダリングを許可していません。画像処理に使用する場合は、正直に表示に使用する必要があります。
ここではwx.canvasGetImageData、画像解析のためにデータを読み取る練習のみを行いますが、組み合わせてwx.canvasPutImageData、フィルターなどの画像処理が実行できるはずです。小さなプログラムの想像力は非常に大きいです。

この記事の複製：小規模プログラムの画像処理：画像のカラーマッチング分析

アプレット画像処理：画像のカラーマッチング分析

背景

画像のカラーマッチング分析アプレット：小さなカラーカード

原理

まとめ

おすすめ