자바스크립트에서 이미지의 상위 N개 기본 색상 값을 얻는 방법-JS 튜토리얼-php.cn

자바스크립트에서 이미지의 상위 N개 기본 색상 값을 얻는 방법

亚连

풀어 주다： 2018-06-09 11:36:39

원래의

2077명이 탐색했습니다.

이 글은 자바스크립트를 이용해 이미지의 상위 N개 메인 컬러 값을 구하는 방법에 대한 자세한 설명과 코드 공유입니다. 관심 있는 친구들은 참고하시면 됩니다.

질문요건

페이지에 가장 자주 나타나는 태그를 찾아보세요! ! !

개인 솔루션:

var eles = document.getElementsByTagName(&#39;*&#39;);
var rs = [];
for(var i=0; i<eles.length; i++) {
  var tag_name = eles[i].tagName.toLowerCase();
  if(undefined != tag_name) {
    if(inJsonArray(rs, tag_name)) {
      addWeight(rs, tag_name);
    }else {
      rs.push({
        tag : tag_name,
        weight : 1
      })
    }        
  }      
}
SortByWeight(rs);

로그인 후 복사

아이디어:

모든 태그를 가져옵니다. 태그 이름에 따라 클러스터링하고 가중치에 따라 정렬합니다.

더 좋은 방법이 있으면 공유해주세요.

오늘의 질문을 살펴보겠습니다.

그림의 상위 N개 기본 색상 값을 얻는 것은 위의 대부분의 레이블 문제와 매우 유사합니다. 데이터 크기에는 차이가 있지만 그 외 모든 것은 동일합니다. .

이 문제의 개념은 매우 명확합니다. 첫 번째 단계는 이미지 데이터를 얻는 것입니다. 두 번째 단계는 색상 값에 따라 클러스터링하는 것입니다. 세 번째 단계는 클러스터링 결과를 정렬하는 것입니다. 그래서 이번에는 이 아이디어를 바탕으로 구현해보겠습니다.

1. 데이터 수집

이미지 데이터 수집은 이미지의 각 픽셀에 대한 rgba 데이터를 얻을 수 있는 캔버스의 getImageData() 메서드를 사용합니다.

var imgdatas=context.getImageData(0,0,150,150);//获取当前canvas数据
var imgdata = imgdatas.data;//获取rgba数据
var i = 0, len = imgdata.length;
var arr = [];
//将图片rgba数据push到新数组中
for(i ; i<len ; i+=4 ) {
  arr.push(imgdata[i]+&#39;,&#39;+imgdata[i+1]+&#39;,&#39;+imgdata[i+2]+&#39;,&#39;+imgdata[i+3]);  
}

로그인 후 복사

이렇게 하면 사진의 모든 데이터를 얻을 수 있고, 나머지는 수학 문제입니다.

2. 데이터 클러스터링

중복 제거, 동일한 색상 값 병합, 색상 값 가중치의 발생 횟수(가중치) 기록

클러스터링 방법, 직접 수학적 통계 또는 k-평균, 결정이 있습니다. -나무 만들기, Naive Bayes, Support Vector Machine 등 원하는 것을 사용하면 되지만 여전히 다양한 방법의 적용 가능성과 효율성을 고려해야 합니다.
색상 값과 발생 횟수를 기록하기 위해 [{rgba: '21,12,45,0', Weight: 12}, {...}] 배열을 얻습니다.

3. 클러스터링 결과

이전 단계에서 얻은 json 배열을 속성 가중치 값에 따라 큰 것에서 작은 것 또는 작은 것에서 큰 것으로 정렬합니다. 말할 필요도 없이 정렬 알고리즘은 필요하지 않습니다.

4. 결과 미리보기