JavaScript를 사용하여 이미지의 평균 색상을 어떻게 계산할 수 있나요?

JavaScript를 사용하여 이미지의 평균 색상 가져오기

이미지의 평균 색상을 결정하는 것은 다양한 애플리케이션에 유용하지만 특히 어려울 수 있습니다. JavaScript를 사용하여 이 작업을 수행할 수 있습니다.

JavaScript 구현

다행히도 HTML5의 발전으로 JavaScript 개발자는 이미지의 평균 색상을 추출하는 요소입니다. 다음 스크립트는 이 기술을 적용할 수 있는 방법을 보여줍니다.

<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 &amp;&amp; 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>

사용법

이미지의 평균 색상을 얻으려면 getAverageRGB 함수를 호출하여 이미지를 전달합니다. 요소를 인수로 사용합니다. 이 함수는 빨간색, 녹색 및 파란색 구성 요소의 평균 값이 있는 객체를 반환합니다.

제한 사항

이 기술은 동일한 도메인에 있는 이미지로 제한되며 HTML5 캔버스 요소를 갖춘 브라우저에서만 지원됩니다. 이전 버전의 Internet Explorer의 경우 excanvas 라이브러리를 통합하여 부분적인 기능을 활성화하는 것을 고려해보세요.

위 내용은 JavaScript를 사용하여 이미지의 평균 색상을 어떻게 계산할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!