在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

您如何將圖像傳遞給函數？ 嘗試以下方法，對我來說效果很好。

現場演示

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