在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); 
}