スポンサーリンク

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

スポンサーリンク
画像のプーリング処理 canvas + JavaScript HTML
スポンサーリンク

スポンサーリンク

概要

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

プーリング処理について

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

サンプルソース

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

デモ

画像処理100本ノックJS
画像処理100本ノックJS : 画像処理100本ノックにJavaSCriptで挑戦してみました。

平均プーリング

平均プーリングのサンプルがこちらになります。

画像処理100本ノックJS
画像処理100本ノックJS : 画像処理100本ノックにJavaSCriptで挑戦してみました。

MAXプーリング

MAXプーリングのサンプルがこちらになります。

参考文献

【入門者向け解説】プーリング処理入門(TensorFlowで説明) - Qiita
#入門者向けに「プーリング」処理について解説 TensorFlowエキスパート向けチュートリアル(
Deep Learning - プーリングについて - Pynote
概要 Deep Learning で用いられるプーリングの仕組み及び種類を紹介する。 概要 プーリング層 プーリングの種類 Max Pooling Average Pooling Global Max Pooling Global Average Pooling
定番のConvolutional Neural Networkをゼロから理解する
Deep Learningの本命CNN。画像認識で圧倒的な成果を上げたのもこの畳み込みニューラルネットワークと呼ばれる手法です。位置不変性と合成性を併せ持つそのアルゴリズムとは?そして、TensorFlowによる実装も紹介しました。
yoyoyo-yo/Gasyori100knock
画像処理100本ノックして画像処理を画像処理して画像処理するためのもの For Japanese, English and Chinese - yoyoyo-yo/Gasyori100knock
タイトルとURLをコピーしました