画像の減色処理 サンプルコードとデモ JavaScript + canvas

目次

1. 概要
2. 減色処理について
3. デモ
4. ソース

概要

画像の減色処理を行ってみた。

サンプルコードとデモの紹介。

環境は JavaScript + Canvas。

減色処理について

通常、Canvas上での画像のRGBそれぞれの値は0〜255までの256^3で表現していますが、 このデモでは、4^3(32, 96, 160, 224)まで減色しています。

この場合、画像は以下のように処理されます。

デモ

以下のURLからでも試すことができます。

https://s-yoshiki.github.io/Gasyori100knockJS/#/questions/ans6

ソース

cv.js

/**
 * 減色処理
 */
export default class {
  /**
   * @param {Object} canvas
   * @param {Object} image
   */
  main(canvas, image) {
    let ctx = canvas.getContext('2d');
    ctx.drawImage(image, 0, 0, image.width, image.height);
    let src = ctx.getImageData(0, 0, image.width, image.height);
    let dst = ctx.createImageData(image.width, image.height);

    let thresholds = [32, 96, 160, 224];

    for (let i = 0; i < src.data.length; i++) {
      if (i % 4 === 3) {
        dst.data[i] = src.data[i];
        continue;
      }

      let neer = Number.MAX_SAFE_INTEGER;
      let _j = 0;

      for (let j in thresholds) {
        let d = Math.abs(src.data[i] - thresholds[j]);
        if (d < neer) {
          neer = d;
          _j = j;
        }
      }

      dst.data[i] = thresholds[_j];
    }
    ctx.putImageData(dst, 0, 0);
  }
}

main.js

import CV from '/path/to/cv.js';
const canvas = document.getElementById('canvas');
let image = new Image();
image.crossOrigin = 'Anonymous';
image.src = 'path/to/image.png';

image.onload = function() {
  canvas.width = image.width;
  canvas.height = image.height;
  let cv = new CV();
  cv.main(canvas, image);
};

参考に知ったソースはこちら。

https://github.com/s-yoshiki/Gasyori100knockJS/blob/master/src/components/questions/answers/Ans6.js