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

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

질문요건

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

개인 솔루션:

var eles = document.getElementsByTagName('*');
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. 결과 미리보기

5. To Do

비슷한 색상 값 병합

rgba(234,234,234,1)과 rgba(234,235,235,1)를 병합해야 합니까? 하나로? 유사성 계산과 같은 문제가 포함됩니다.

클러스터링 알고리즘 최적화

복잡도 증가, 성능 향상, 실행 속도 향상

일부 시각화 기능과 결합

6. 요약

결국 대량의 데이터를 백엔드에서 처리하는 것이 더 적합합니다. , 분포는 수식 프레임워크와 같은 다중 터미널 컴퓨팅을 사용할 수 있습니다.

브라우저의 데이터 처리 기능은 여전히 ​​제한되어 있습니다.

위 내용은 제가 여러분을 위해 정리한 내용입니다. 앞으로 도움이 되길 바랍니다.

관련 기사:

JavaScript의 Object 기본 내부 메소드 다이어그램(그래픽 튜토리얼)

vue에서 ztree를 사용하는 방법(자세한 튜토리얼)

JS를 사용하여 Waterfall Flow 플러그인을 구현하는 방법

사용법 JS에서 대지 복사 기능을 구현하는 방법

JS에서 오프셋 및 균일 애니메이션을 구현하는 방법

Bootstrap에서 테이블 병합 셀을 구현하는 방법

위 내용은 자바스크립트에서 이미지의 상위 N개 기본 색상 값을 얻는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!