画像のプーリング処理 canvas + JavaScript

概要

JavaScriptで画像のプーリング処理を行ってみました。

プーリング処理について

プーリングは畳み込みに似た処理で、CNNでも重要な役割があります。画像を圧縮する役割を果たします。平均プーリングやmaxプーリングといったものがあります。平均プーリングはグリッド内を平均の値で埋めるもので、MAXプーリングはグリッド内の最大値で埋めます。

平均プーリング [average pooling] プーリング関数の１つである、平均プーリングは、添付図のように、局所的な受容野 P_i,j 内に属するノードの入力値の平均を、このノードの出力として集約する（空間的にぼかす）。 pic.twitter.com/0WxbnJ9qzO
— ヤガミ (@yagami_360) 2017年10月6日

サンプルソース

平均プーリング

export default class {
  /**
   * メイン
   * @param {Object} canvas
   * @param {Object} image
   */
  main(canvas, image) {
    let w = image.width;
    let h = image.height;
    let dx = w / 16;
    let dy = h / 16;

    let ctx = canvas.getContext('2d');
    ctx.drawImage(image, 0, 0, image.width, image.height);

    const blurColor = (x, y, w, h) => {
      let ctx = canvas.getContext('2d');
      let r, g, b;
      r = g = b = 0;

      let src = ctx.getImageData(x, y, w, h);
      let dst = ctx.createImageData(w, h);

      for (let i = 0; i < src.data.length; i += 4) {
        r += src.data[i];
        g += src.data[i + 1];
        b += src.data[i + 2];
      }

      r /= src.data.length / 4;
      g /= src.data.length / 4;
      b /= src.data.length / 4;

      r = Math.ceil(r);
      g = Math.ceil(g);
      b = Math.ceil(b);

      for (let i = 0; i < src.data.length; i += 4) {
        dst.data[i] = r;
        dst.data[i + 1] = g;
        dst.data[i + 2] = b;
        dst.data[i + 3] = 255;
      }
      ctx.putImageData(dst, x, y);
    };

    for (let i = 0; i < canvas.width; i += dx) {
      for (let j = 0; j < canvas.height; j += dy) {
        blurColor(i, j, dx, dy);
      }
    }
  }
}

MAXプーリング

export default class {
  /**
   * メイン
   * @param {Object} canvas
   * @param {Object} image
   */
  main(canvas, image) {
    let w = image.width;
    let h = image.height;
    let dx = w / 16;
    let dy = h / 16;

    let ctx = canvas.getContext('2d');
    ctx.drawImage(image, 0, 0, image.width, image.height);

    const blurColor = (x, y, w, h) => {
      let ctx = canvas.getContext('2d');
      let r, g, b;
      r = g = b = 0;

      let src = ctx.getImageData(x, y, w, h);
      let dst = ctx.createImageData(w, h);

      for (let i = 0; i < src.data.length; i += 4) {
        r = src.data[i] > r ? src.data[i] : r;
        g = src.data[i + 1] > g ? src.data[i + 1] : g;
        b = src.data[i + 2] > b ? src.data[i + 2] : b;
      }

      for (let i = 0; i < src.data.length; i += 4) {
        dst.data[i] = r;
        dst.data[i + 1] = g;
        dst.data[i + 2] = b;
        dst.data[i + 3] = 255;
      }
      ctx.putImageData(dst, x, y);
    };

    for (let i = 0; i < canvas.width; i += dx) {
      for (let j = 0; j < canvas.height; j += dy) {
        blurColor(i, j, dx, dy);
      }
    }
  }
}