Canvas ImageData에 102,000 개가 넘는 값이 있습니까?

Question

캔버스를 사용하여 이미지에서 픽셀 값을 가져옵니다. 이미지 크기는 170 * 170 픽셀입니다. 여기 내 코드입니다 : 그것은 잘 작동

var canvas = document.createElement("canvas"); 
canvas.style.width = img.width; 
canvas.style.height = img.height; 
canvas.getContext('2d').drawImage(img, 0, 0, img.width, img.height); 
var pixelData = canvas.getContext('2d').getImageData(0, 0, img.width, img.height).data; 

내가 pixelData [102000]를 도달 할 때까지, 나는 pixelData의 값을 가지고 ... 나는 흰색 이미지와 테스트를했습니다, 그리고 pixelData의 모든 값을 [0 ] to pixelData [101999]는 255이지만 끝까지 0입니다 ...

누군가가 왜 보이나요? 어쩌면 이것은 캔버스 너비와 높이에 관한 것입니까?

Answer 1

당신의 캔버스 크기는 당신이 생각하는 것과 다릅니다.

에만 캔버스 요소하지 캔버스 비트 맵의 ​​크기를 설정하는 것은 :

canvas.style.width = img.width; 
canvas.style.height = img.height; 

이 비트 맵이 실제로 크기가 300 X 150 픽셀, 기본 크기을 의미하고, 그냥있어 이미지의 크기로 조정합니다 (모든 흰색이기 때문에 이것을 쉽게 감지 할 수 없습니다).

이미지가 170x170 픽셀이므로 남은 부분은 기본 RGBA 값 [0,0,0,0]으로 남겨 둡니다. 위해

제대로 위에서 언급 한 라인으로 편집해야합니다 캔버스의 크기를 설정합니다 : 예,이 문제는, 감사

canvas.width = img.width; 
canvas.height = img.height;