canvas 그림 색상 주 색조 가져오기

canvas,img원소

가져오기

canvas의 getImageData 방법으로 픽셀 데이터 가져오기

canvas의 getImageData 방법

오류 그림 크로스 필드 참조: h5 탭의crossorigin 속성
getImageData () 방법은 ImageData 대상을 되돌려줍니다. 이 대상은 화포가 지정한 직사각형의 픽셀 데이터를 복사합니다.
ImageData 객체의 각 픽셀에는 RGBA 값과 같은 네 가지 정보가 있습니다.

R - 빨간색(0-255)

G - 그린(0-255)

B - 파란색(0-255)

A - 알파 채널(0-255;0은 투명하고 255는 완전히 볼 수 있음)

color/alpha는 배열 형식으로 존재하며 ImageData 대상의 데이터 속성에 저장됩니다
매개 변수
x
복사를 시작한 왼쪽 상단 위치의 x 좌표입니다.
y
복사를 시작한 왼쪽 상단 위치의 y 좌표입니다.
width
복사할 사각형 영역의 너비입니다.
height
복사할 사각형 영역의 높이

이루어지다

const canvas = this.refs.wheelbg
const img = document.getElementById('tplWheelBg')

_setWheelBgtcMainTonal = (canvas, img) => {
        canvas.width = img.width
        canvas.height = img.height
        let context = canvas.getContext('2d')

        context.drawImage(img, 0, 0)

        //  
        let data = context.getImageData(0, 0, img.width, img.height).data
        console.log(data);
        let r = 0,
            g = 0,
            b = 0
        //  
        for (let row = 0; row < img.height; row++) {
            for (let col = 0; col < img.width; col++) {
                r += data[(img.width * row + col) * 4]
                g += data[(img.width * row + col) * 4 + 1]
                b += data[(img.width * row + col) * 4 + 2]
            }
        }
        //  
        r /= img.width * img.height
        g /= img.width * img.height
        b /= img.width * img.height

        //  
        r = Math.round(r)
        g = Math.round(g)
        b = Math.round(b)

        //rgb 16   
        const color = ((r << 16) | (g << 8) | b).toString(16)
        return color
    }

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

Vue.js의 v-for로 분할 할당

의 v-for 지시어로 과 같은 것을 하고 싶었습니다만, 「Vue.js 분할 대입」이나 「v-for 분할 대입」과 같이 검색해도 히트하지 않고 , 영어에서 "Vue.js Destructuring assignment"...

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

canvas 그림 색상 주 색조 가져오기

canvas의 getImageData 방법

이루어지다

좋은 웹페이지 즐겨찾기