JavaScript 캔버스에서 이미지의 색상 픽셀 얻기

Question

이미지의 픽셀 색상을 얻으려고 노력 중입니다. 픽셀의 RGB 값을 가져 와서 점프하고 배열에 저장해야하지만 콘솔은 항상 [0, 0, 0 ...]을 반환합니다.

더 좋은 방법으로 어떻게해야하는지 알고 계십니까?

내 코드는 다음과 같습니다

function captureImageData(image) 
{ 
    var cnv = document.createElement('canvas'); 
    cnv.width = image.width; 
    cnv.height = image.height; 

    var ctx = cnv.getContext('2d'); 
    ctx.drawImage(image, 0, 0); 

    var imageData = ctx.getImageData(0, 0, 200, 100); 

    var data = imageData.data; 
    var height = imageData.height; 
    var width = imageData.width; 

    for (var y = 0; y < 100; y += 2) 
    { 
     for (var x = 0; x < 200; x += 2) 
     { 
      red.push(data[(y * imageData.width + x) * 4 + 0]); 
      green.push(data[(y * imageData.width + x) * 4 + 1]); 
      blue.push(data[(y * imageData.width + x) * 4 + 2]); 
      alpha.push(data[(y * imageData.width + x) * 4 + 3]); 
     } 
    } 

    console.log(red); 
} 

Answer 1

는 어떻게 기능에 이미지를 전달하는? 다음을 시도해보십시오, 그것은 잘 작동합니다. 당신의 도움에 대한

Live Demo

var red = [], 
    green = [], 
    blue = [], 
    alpha = []; 

function captureImageData(image) { 
    var cnv = document.createElement('canvas'); 
    cnv.width = image.width; 
    cnv.height = image.height; 

    var ctx = cnv.getContext('2d'); 
    ctx.drawImage(image, 0, 0); 

    var imageData = ctx.getImageData(0, 0, 200, 100); 

    var data = imageData.data; 
    var height = imageData.height; 
    var width = imageData.width; 
    var index = 0; 

    for (var y = 0; y < 100; y += 2) { 
     for (var x = 0; x < 200; x += 2) { 
      index = (y * imageData.width + x) * 4; 
      red.push(data[index]); 
      green.push(data[index + 1]); 
      blue.push(data[index + 2]); 
      alpha.push(data[index + 3]); 
     } 
    } 
    // log out any pixel here 
    console.log(red[1]); 
} 

var image = new Image(); 

image.crossOrigin = true; 
image.src = "http://i.imgur.com/LdmrhlK.jpg"; 

image.onload = function() { 
    captureImageData(this); 
}