이미지의 상위 N개 색상 값을 얻는 JS 방법

이번에는 사진의 상위 N 색상 값을 얻는 JS의 상위 N 색상 값 방법을 알려 드리겠습니다. JS로 사진의 상위 N 색상 값을 얻는 Notes는 무엇입니까? , 살펴 보겠습니다.

질문요건

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

개인 솔루션:

var eles = document.getElementsByTagName('*');
var rs = [];
for(var i=0; i<eles.length sortbyweight><p style="text-align: left;">아이디어: </p>
<p style="text-align: left;">모든 태그를 가져옵니다. 태그 이름에 따라 클러스터링합니다. 무게에 따라 정렬합니다. </p>
<p style="text-align: left;">더 좋은 방법이 있으면 공유해주세요. </p>
<p style="text-align: left;">오늘의 질문을 살펴보겠습니다. </p>
<p style="text-align: left;">사진의 상위 N개 기본 색상 값을 얻는 것은 위의 대부분의 레이블에 대한 문제와 매우 유사하지만 데이터 크기는 다르지만 다른 모든 것은 동일합니다. </p>
<blockquote style="text-align: left;"><p style="text-align: left;"><span style="font-size: 14px; font-family: -apple-system, " helvetica neue arial sc sans gb micro hei yahei sans-serif text-transform: none word-spacing: float: font-weight: normal color: rgb font-style: orphans: widows: display: inline letter-spacing: background-color: text-indent: font-variant-ligatures: font-variant-caps:>이 문제의 개념은 매우 명확합니다. 첫 번째 단계는 이미지 데이터를 얻는 것입니다. 두 번째 단계는 색상 값에 따라 클러스터링하는 것입니다. 세 번째 단계는 클러스터링 결과를 정렬하는 것입니다. 그래서 이번에는 이 아이디어를 바탕으로 구현해보겠습니다. </span></p></blockquote>
<p style="text-align: left;"><strong>1. 데이터 수집</strong></p>
<p style="text-align: left;"> 이미지 데이터 수집은 이미지의 각 픽셀에 대한 rgba 데이터를 얻을 수 있는 캔버스의 getImageData() 메서드를 사용합니다. </p>
<pre class="brush:php;toolbar:false">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><p style="text-align: left;">이렇게 하면 사진의 모든 데이터를 얻을 수 있고, 나머지는 수학 문제입니다. </p>
<p style="text-align: left;"><strong>2. 데이터 클러스터링</strong></p>
<p style="text-align: left;">중복 제거, 동일한 색상 값 병합, 색상 값 가중치의 발생 횟수(가중치) 기록</p>
<p style="text-align: left;">클러스터링 방법, 직접 수학적 통계 또는 k-평균, 결정이 있습니다. -나무 만들기, Naive Bayes, Support Vector Machine 등 원하는 것을 사용하면 되지만 여전히 다양한 방법의 적용 가능성과 효율성을 고려해야 합니다. <br>색상 값과 발생 횟수를 기록하기 위해 [{rgba: '21,12,45,0', Weight: 12}, {...}] 배열을 얻습니다. </p>
<p style="text-align: left;"><strong>3. 클러스터링 결과</strong> </p>
<p style="text-align: left;"> 이전 단계에서 얻은 json 배열을 속성 가중치 값에 따라 큰 것에서 작은 것 또는 작은 것에서 큰 것으로 정렬합니다. 말할 것도 없이 정렬 알고리즘은 말할 필요도 없습니다. </p>
<p style="text-align: left;"><strong>4. 결과 미리보기</strong></p>
<p style="text-align: left;"><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/061/021/ccd9860e7193b5206da3ba40bcfe11fc-0.png?x-oss-process=image/resize,p_40" class="lazy" alt=""></p>
<p style="text-align: left;"><strong>5. To Do</strong></p>
<p style="text-align: left;">비슷한 색상 값 병합</p>
<p style="text-align: left;">rgba(234,234,234,1)과 rgba(234,235,235,1)를 병합해야 합니까? 하나로? 유사성 계산과 같은 문제가 포함됩니다. </p>
<p style="text-align: left;">클러스터링 알고리즘 최적화</p>
<p style="text-align: left;">복잡도 증가, 성능 향상, 실행 속도 향상</p>
<p style="text-align: left;">일부 시각화 기능과 결합</p>
<p style="text-align: left;"><strong>6. 요약</strong></p>
<p style="text-align: left;">결국 대량의 데이터를 백엔드에서 처리하는 것이 더 적합합니다. , 분포는 수식 프레임워크와 같은 다중 터미널 컴퓨팅을 사용할 수 있습니다. </p>
<p style="text-align: left;">브라우저의 데이터 처리 기능은 여전히 ​​제한되어 있습니다. </p>
<p>이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요! </p>
<p>추천 도서: </p>
<p><a href="http://www.php.cn/xiaochengxu-389815.html" target="_blank"> 미니 프로그램에서 애니메이션 애니메이션 구현 </a><br></p>
<p><a href="http://www.php.cn/xiaochengxu-389813.html" target="_blank">미니 프로그램에서 openid 및 사용자 정보 가져오기 </a><br></p>
<p><a href="http://www.php.cn/js-tutorial-389807.html" target="_blank">jquery를 사용하여 PC용 회전식 차트 만들기에 대한 자세한 설명 </a><br></p></len>

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