이미지에서 일본의 전통색을 꺼내 보는 라이브러리 만들었다
이미지에서 일본의 전통색을 꺼내보세요
소개
안녕하세요, 저입니다.
이번에는 이미지 속에서 전유하고 있는 색을 꺼내는 기존의 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
Reference
이 문제에 관하여(이미지에서 일본의 전통색을 꺼내 보는 라이브러리 만들었다), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/ykhirao/items/58f7aa3888ada78c1a4c
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
;(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);
<script src="./traditionalColors.js"></script> |
<script>
const tc = new window.TraditionalColors();
console.log(tc.getNearColor({r: 14, g: 12, b: 243}))
</script>
Reference
이 문제에 관하여(이미지에서 일본의 전통색을 꺼내 보는 라이브러리 만들었다), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/ykhirao/items/58f7aa3888ada78c1a4c텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)