используйте getImageData для получения значения RGB - PullRequest
Новая
       19

используйте getImageData для получения значения RGB

0 голосов
/ 13 сентября 2018

Я читаю все пиксели изображения и пытаюсь получить значение rgb пикселя и изменить его. В настоящее время я получаю только 1 переменную из этого. Это варьируется от 1 до 255. Но я не могу получить 3 значения из этого. Что я делаю не так? 

<script>
var effectButton;
var paintButton;
var canvas;
var context;

function init()
{
    var image = document.getElementById('SourceImage');
    effectButton = document.getElementById('EffectButton');
    paintButton = document.getElementById('PaintButton');
    canvas = document.getElementById('Canvas');
    context = canvas.getContext('2d');

    // Set the canvas the same width and height of the image
    canvas.width = image.width;
    canvas.height = image.height;

    paintButton.addEventListener('click', function ()
    {
        drawImage(image);
    });

    effectButton.addEventListener('click', addEffect);
}

function drawImage(image)
{
  context.drawImage(image, 0, 0);
}

function addEffect()
{
    var imageData = context.getImageData(0, 0, canvas.width, canvas.height);
    MakeMoreRed(imageData.data);
    context.putImageData(imageData, 0, 0);
}

function MakeMoreRed(data)
{
    for (var i = 0; i < data.length; i++ )
    {
        //How do i get the rgb value?? from data[i]
        data[i] = data[i] + 5;

        //var green = data[i] + 5;
        //var blue= data[i] + 5;
    }
}

window.addEventListener('load', init);

</script>

1 Ответ

0 голосов
/ 13 сентября 2018

Разобрался.Данные в основном это огромный массив.data [0] - это значение красного первого пикселя, data [1] - значение зеленого первого пикселя, data [2] - значение синего первого пикселя, а data [3] - значение непрозрачности первогоpixel.

Зная это, я сделал цикл for для прохождения каждого пикселя. 

function MakeMoreRed(data)
{
var index;

for(var y = 0; y < canvas.height; y++ )
{
    for(var x = 0; x < canvas.width; x++ )
    {
        index = (x + y * canvas.width)*4;

        data[index+0] = data[index+0] + 5;
        data[index+1] = 0;
        data[index+2] = 0;
        data[index+3] = 255;
    }
}

}

...