JavaScript에서 이미지의 평균 색상 가져오기
문제:
결정이 가능합니까? 다음을 사용하여 이미지의 평균 색상 JavaScript?
해결책:
즉각적으로 드러나지는 않더라도 실제로 JavaScript를 사용하면 이미지의 평균 색상을 계산할 수 있습니다. 이를 달성하는 열쇠는 HTML5 <캔버스> 요소.
이미지에서 평균 색상을 추출하려면 다음 단계를 따르세요.
다음은 설명된 알고리즘을 구현하는 예제 함수입니다.
<code class="javascript">function getAverageRGB(imgEl) { var blockSize = 5, // only visit every 5 pixels defaultRGB = { r: 0, g: 0, b: 0 }, // for non-supporting envs canvas = document.createElement('canvas'), context = canvas.getContext && canvas.getContext('2d'), data, width, height, i = -4, length, rgb = { r: 0, g: 0, b: 0 }, count = 0; if (!context) { return defaultRGB; } height = canvas.height = imgEl.naturalHeight || imgEl.offsetHeight || imgEl.height; width = canvas.width = imgEl.naturalWidth || imgEl.offsetWidth || imgEl.width; context.drawImage(imgEl, 0, 0); try { data = context.getImageData(0, 0, width, height); } catch(e) { /* security error, img on diff domain */ return defaultRGB; } length = data.data.length; while ((i += blockSize * 4) < length) { ++count; rgb.r += data.data[i]; rgb.g += data.data[i + 1]; rgb.b += data.data[i + 2]; } // ~~ used to floor values rgb.r = ~~(rgb.r / count); rgb.g = ~~(rgb.g / count); rgb.b = ~~(rgb.b / count); return rgb; }</code>
이 함수는 이미지 요소를 입력으로 사용하고 해당 요소가 포함된 객체를 반환합니다. 평균 빨간색, 녹색, 파란색 값을 정수로 표시합니다.
위 내용은 JavaScript를 사용하여 이미지의 평균 색상을 계산하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!