서비스 구현 중에 color의 값을 다양한 포멧으로 바꿔야할 경우가 생깁니다. 이런 경우를 위한 colorConverter를 만들고 간단히 활용하는 방법에 대해 알아보겠습니다.
color converter는 다양한 오픈소스로 존재하고 더 다양한 메소드를 지원합니다. 하지만 저는 4개만을 위한 color converter 모듈을 만들고 활용해보려고 합니다.
ColorConverter에 4가지 타입에 대한 값을 넣어주면 원하는 타입으로 변경하여 돌려줍니다.
<Logic>
4가지 타입의 color input -> rgba 로 변환 -> getTYPE 으로 원하는 타입으로 output
ColorConverter = {
getRGB: function (color) {
let rgba = this.__change(color);
return `rgb(${rgba.r},${rgba.g},${rgba.b})`
},
getRGBA: function (color) {
let rgba = this.__change(color);
return `rgba(${rgba.r},${rgba.g},${rgba.b},${rgba.a})`
},
getHEX: function (color) {
let rgba = this.__change(color);
let toHex = function (string) {
string = parseInt(string, 10).toString(16);
string = (string.length === 1) ? "0" + string : string;
return string;
};
let r = toHex(rgba.r);
let g = toHex(rgba.g);
let b = toHex(rgba.b);
return `#${r}${g}${b}`;
},
getCMYK: function (color) {
let rgba = this.__change(color);
var c = 1 - (rgba.r / 255);
var m = 1 - (rgba.g / 255);
var y = 1 - (rgba.b / 255);
var k = Math.min(c, Math.min(m, y));
c = (c - k) / (1 - k) * 100;
m = (m - k) / (1 - k) * 100;
y = (y - k) / (1 - k) * 100;
k = k * 100;
c = isNaN(c) ? 0 : Math.round(c);
m = isNaN(m) ? 0 : Math.round(m);
y = isNaN(y) ? 0 : Math.round(y);
k = isNaN(k) ? 0 : Math.round(k);
let cmky = `cmyk(${c}%,${m}%,${y}%,${k}%)`;
return cmky;
},
__change(color) {
color = color.toLowerCase();
if (color.includes('#')) {
let hex = color.replace('#', '');
let value = hex.match(/[a-f\d]/gi);
if (value.length == 3) hex = value[0] + value[0] + value[1] + value[1] + value[2] + value[2];
value = hex.match(/[a-f\d]{2}/gi);
let r = parseInt(value[0], 16);
let g = parseInt(value[1], 16);
let b = parseInt(value[2], 16);
let rgba = {
r: r,
g: g,
b: b,
a: 255
}
return rgba;
}
else if (color.includes('rgba')) {
let r = color.split(',')[0].replace(/[^0-9]/g, "") ;
let g = color.split(',')[1].replace(/[^0-9]/g, "") ;
let b = color.split(',')[2].replace(/[^0-9]/g, "") ;
let a = color.split(',')[3].replace(/[^0-9]/g, "") ;
let rgba = {
r: r,
g: g,
b: b,
a: 255
}
return rgba;
}
else if (color.includes('rgb')) {
let r = color.split(',')[0].replace(/[^0-9]/g, "") ;
let g = color.split(',')[1].replace(/[^0-9]/g, "") ;
let b = color.split(',')[2].replace(/[^0-9]/g, "") ;
let rgba = {
r: r,
g: g,
b: b,
a: 255
}
return rgba;
}
else if (color.includes('cmyk')) {
let c = color.split(',')[0].replace(/[^0-9]/g, "") / 100;
let m = color.split(',')[1].replace(/[^0-9]/g, "") / 100;
let y = color.split(',')[2].replace(/[^0-9]/g, "") / 100;
let k = color.split(',')[3].replace(/[^0-9]/g, "") / 100;
let r = Math.round(255 - ((Math.min(1, c * (1 - k) + k)) * 255));
let g = Math.round(255 - ((Math.min(1, m * (1 - k) + k)) * 255));
let b = Math.round(255 - ((Math.min(1, y * (1 - k) + k)) * 255));
let rgba = {
r: r,
g: g,
b: b,
a: 255
}
return rgba;
}
}
}
<결과>
ColorConverter.getRGB(color); // "cmyk(41%,4%,0%,67%)"
ColorConverter.getRGBA("#325255") // "rgba(50,82,85,255)"
ColorConverter.getRGB("#325255") // "rgb(50,82,85)"
ColorConverter.getHEX("#325255") // "#325255"
'개발 > 자바스크립트' 카테고리의 다른 글
[자바스크립트] 문자열 파싱(split, ...) 그리고 Set에 대해 (0) | 2020.08.21 |
---|---|
[자바스크립트] 최적화 #3 문자열 최적화 (+병합, 배열병합) (0) | 2020.08.12 |
[자바스크립트]자바스크립트 배열을 다루기 위한 함수 8가지 소개 (0) | 2020.07.30 |
[자바스크립트] 크롬 개발자 도구의 좀 더 이득보는 기능들 (0) | 2020.07.30 |
[자바스크립트] 최적화 #2 : 반복문 최적화(Duff's Device) (0) | 2020.07.29 |
댓글