我正在读取图像的所有像素,我正在尝试获取像素的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>
弄清楚了。数据基本上是一个庞大的数组。 data [0]是第一个像素的红色值,data [1]是第一个像素的绿色值,data [2]是第一个像素的蓝色值,data [3]是第一个像素的不透明度值像素。
知道这一点,我做了一个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;
}
}
}