이미지에서 일본의 전통색을 꺼내보세요

소개

안녕하세요, 저입니다.

이번에는 이미지 속에서 전유하고 있는 색을 꺼내는 기존의 rgbaster.js 와 이번에 자신이 만든 traditionalColors.js 를 조합하여 웹 앱을 만들어 보겠습니다.

아티팩트

이미지는 아래에 스크린샷을 붙여 넣었습니다만, 이미지 속의 독자적인 색에 가까운 「일본의 전통색」을 돌려준다고 하는 느낌의 Web 어플입니다.



실제로 동작하는 환경은 이쪽의 의투 b. 이오 로부터 부디! !

"파일 선택"을 클릭하여 적절한 이미지를 브라우저에 올려보십시오. 그러면 JS/Canvas가 엄청나게 움직여 색을 판정해 줄 것입니다.

아티팩트 2

이미지는 아래에 스크린 샷을 붙여 넣었지만 컬러 피커를 시작하고 색상을 입력하면 전통 색상을 반환하는 웹 응용 프로그램입니다. 부디 놀아보세요. 의투 b. 이오 클릭할 수 있는 것은 위쪽의 칼라 피커 뿐입니다!

코드 이야기

코드는 htps : // 기주 b. 코 m / yk 히라오 / t 라 치오 나입니다.

traditionalColor.js

;(function(window, undefined){
  "use strict";

  class TraditionalColors {
    constructor() {
      console.log("TraditionalColors is roaded !!!");
      this.colors = [] // 本当はここに伝統色のJSONが入っている
    }

    distance3D(a, b) {
      return Math.sqrt((Math.pow((a.r - b.r), 2) + Math.pow((a.g - b.g), 2) + Math.pow((a.b - b.b), 2)));
    }

    regExpToRgb(result, decimal=10) {
      const r = parseInt(result[1], decimal)
      const g = parseInt(result[2], decimal)
      const b = parseInt(result[3], decimal)
      return {r, g, b}
    }

    rgbStrToObj(str) {
      // from text "rgb(4,8,16)" to obj { r: 4, g: 8, a:16 }
      var result = /([0-9]{1,3}),([0-9]{1,3}),([0-9]{1,3})/i.exec(str);
      return result ? this.regExpToRgb(result) : null;
    }

    hexToRgbObj(str){
      // "#1234aa" to { r: 12, g: 34, a: aa }
      var result = /([a-zA-Z0-9]{2})([a-zA-Z0-9]{2})([a-zA-Z0-9]{2})/i.exec(str);
      return result ? this.regExpToRgb(result, 16) : null;
    }

    getNearColor(rgb) {
      let i = 0,
        approximationIndex = 0,
        minDiff = Math.abs(this.distance3D(this.colors[0].rgb, rgb)),
        diff;

      while (++i < this.colors.length) {
        diff = Math.abs(this.distance3D(this.colors[i].rgb, rgb));

        if (diff < minDiff) {
          minDiff = diff;
          approximationIndex = i;
        }
      }
      return this.colors[approximationIndex];
    }
  }

  window.TraditionalColors = window.TraditionalColors || TraditionalColors;
})(window);

이상이 traditionalColors.js이지만, 볼 수 있듯이 큰 일은하지 않습니다. 모든 전통색과의 거리 측정해 가까운 것을 반환하고 있을 뿐입니다.

사용법은

index.html

<script src="./traditionalColors.js"></script> |
<script>
  const tc = new window.TraditionalColors();
  console.log(tc.getNearColor({r: 14, g: 12, b: 243}))
</script>

적인 느낌으로 인스턴스 변수를 만들어 메소드를 부르면 여러가지 사용할 수 있습니다. 사쿠토 간단한 놀이로 만들었습니다만, 사진이 취미인 사람으로부터 하면 상당히 즐거웠습니다.

끝에

rgbaster.js의 소스 코드를 읽는 것이 쉬웠으므로 꼭 읽어 보는 것이 좋을 것입니다. canvas의 사용법도 배웠습니다.

참고

rgbaster.js를 사용하여 이미지의 색상을 추출해 봅시다 | LIG