画像のHSV変換 JavaScript + canvas

目次

1. 概要
2. デモ
3. ソース
4. 参考

概要

画像のHSV変換を行うサンプルコードとデモの紹介

デモ

以下のリンクでデモを動かしています。

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

デモの内容はRGB画像をHSVに変換し、色相(H)を反転(180を加算)した後、再びRGBに戻すとい処理を行なっています。

デモの実行後、画像はこの写真のように処理されます。

ソース

hsv.js

/**
 * HSV変換
 */
export default class {
  /**
   * rgb to hsv
   * @param {Array} rgb
   */
  rgb2hsv(rgb) {
    let r = rgb[0] / 255;
    let g = rgb[1] / 255;
    let b = rgb[2] / 255;

    let max = Math.max(r, g, b);
    let min = Math.min(r, g, b);
    let diff = max - min;

    let h = 0;

    switch (min) {
      case max:
        h = 0;
        break;
      case r:
        h = (60 * ((b - g) / diff)) + 180;
        break;
      case g:
        h = (60 * ((r - b) / diff)) + 300;
        break;
      case b:
        h = (60 * ((g - r) / diff)) + 60;
        break;
    }

    let s = max == 0 ? 0 : diff / max;
    let v = max;

    return [h, s, v];
  }
  /**
   * hsv to rgb
   * @param {Array} hsv
   */
  hsv2rgb(hsv) {
    let h = hsv[0];
    let s = hsv[1];
    let v = hsv[2];
    let c = v * s;
    let hp = h / 60;
    let x = c * (1 - Math.abs(hp % 2 - 1));

    let r, g, b;
    if (0 <= hp && hp < 1) [r, g, b] = [c, x, 0];
    if (1 <= hp && hp < 2) [r, g, b] = [x, c, 0];
    if (2 <= hp && hp < 3) [r, g, b] = [0, c, x];
    if (3 <= hp && hp < 4) [r, g, b] = [0, x, c];
    if (4 <= hp && hp < 5) [r, g, b] = [x, 0, c];
    if (5 <= hp && hp < 6) [r, g, b] = [c, 0, x];

    let m = v - c;
    [r, g, b] = [r + m, g + m, b + m];

    r = Math.floor(r * 255);
    g = Math.floor(g * 255);
    b = Math.floor(b * 255);

    return [r, g, b];
  }
  /**
   * メイン
   * @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);

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

      let hsv = this.rgb2hsv([r, g, b]);
      hsv[0] = (hsv[0] + 180) % 360;
      let rgb = this.hsv2rgb(hsv);

      dst.data[i] = rgb[0];
      dst.data[i + 1] = rgb[1];
      dst.data[i + 2] = rgb[2];
      dst.data[i + 3] = src.data[i + 3];
    }
    ctx.putImageData(dst, 0, 0);
  }
}

main.js

import HSV from '/path/to/hsv.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 hsv = new HSV();
  hsv.main(canvas, image);
};

参考にしたソース

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

参考

参考にしたサイトのまとめです。

https://qiita.com/hachisukansw/items/633d1bf6baf008e82847

https://gist.github.com/mjackson/5311256

https://lab.syncer.jp/Web/JavaScript/Snippet/66/