픽셀 RGB 값이 모두 0입니다.

캔버스의 픽셀을 반복하고 싶지만 캔버스에 이미지가 있어도 모든 픽셀의 RGB는 0,0,0 RGB 값을 갖습니다.픽셀 RGB 값이 모두 0입니다.

내 코드는 다음과 같습니다. 캔버스가 오염하고 웹 브라우저 보안 당신이 그것을 데이터의 읽기 허용하지 않기 때문에

for(i = 400; i < 1000; i += 4) { 
     red = imageData.data[i]; 
     green = imageData.data[i + 1]; 
     blue = imageData.data[i + 2]; 
     alpha = imageData.data[i + 3]; 
     console.log(red + "," + green + "," + blue + "," + alpha); 
    }

출처

2014-06-17 Cem

http://jsfiddle.net/mwPfa/3/ 작업 예 – ViliusL

감사합니다. applyPaint()가 img의 onload에있을 때 잘 동작합니다. 그러나 그것이 왜 있어야만 하는가? – Cem

applyPaint()는로드되는 이미지를 사용합니다. image.onload가 호출되었지만 처음에 applyPaint를 배치 한 위치에 이미지가 완전히로드되지 않으면 이미지가 완전히로드됩니다. – markE

작업 예를 http://jsfiddle.net/mwPfa/3/

다음은 몇 가지 언급했다 :

창로드를 - jsfiddle 당신이 그것을 사용하는 필요 없어요.
CORS의 경우 jsfiddle에서 이미지 양식 외부 도메인을로드하려면 해당 이미지를 지원하고 img.crossOrigin = "Anonymous";으로로드해야합니다. 모든 이미지가 여기에서 작동하지는 않습니다.
이미지 데이터에 액세스하려면 이미지가로드 될 때까지 기다려야하므로 이미지를 그리고 onload 처리기에서만 데이터에 액세스하십시오. 당신은 이미지가로드되기 전에 캔버스 데이터에 액세스하고 싶지 않습니다 ... 가끔은 작동하지만 안정적인 코드를 원할 때마다 언제나 작동합니다. 그렇습니까?
값이 0,0,0 인 RGB는 의 유효 색이이므로 검은 색 왼쪽 상단 모서리가 아닌 이미지를 테스트해야합니다.

출처

2014-06-17 12:19:10 ViliusL

추가 정보를 제공해 주셔서 감사합니다. – Cem

이 가능성이 가장 높은 (내 테스트 이미지는 jsfiddle에서 볼 수 없습니다). 이는 도메인 간 보안 때문입니다. 다른 도메인의 이미지 나 비디오를로드하여 캔버스에 그려야합니다. 도메인 간 보안이 없다면 다음과 같이 할 수 있습니다. 사용자가 Facebook 사진 등을 훔칩니다.

모질라 개발자 네트워크가 어떻게 문제 그러나

https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image

를 처리 할 수있는 좋은 기사를 가지고, 내 제안은 동일한 도메인에서 가능 부하 HTML 페이지 및 이미지를 피하기 위해하는 경우이다 CORS 문제. -

출처

2014-06-17 10:19:50

나는 내 컴퓨터의 html, js 및 png 파일로만 작업하는 서버를 사용하지 않습니다. 이미지를 볼 수는 있지만 픽셀을 읽을 때 모두 0의 값을 갖습니다. – Cem

그게 문제 일거야. http://www.linuxjournal.com/content/tech-tip-really-simple-http-server-python과 같은 개발 웹 서버를 사용하십시오. file : // 프로토콜에는 실제 웹 사이트에 영향을주지 않는 많은 문제가 있습니다. –

픽셀 RGB 값이 모두 0입니다.

답변

관련 문제