使用Canvas操作像素的方法

简而言之，这个数组在每个位置存储范围从0到255的值，这使得它成为RGBA格式的完美解决方案，因为每个部分都由0到255个值表示。

RGBA颜色

颜色可以用RGBA格式表示，它是红色，绿色和蓝色的组合。 A表示颜色不透明度的α值。

数组中的每个位置代表一个颜色（像素）通道值。

第一个位置是红色值
第二个位置是绿色值
第三个位置是蓝色值
第四个位置是Alpha值
第5个位置是下一个像素红色值
第6个位置是下一个像素的绿色值
第7个位置是下一个像素的蓝色值
第8个位置是下一个像素Alpha值
等等…

如果您有2×2图像，那么我们有一个16位阵列（每个2×2像素x 4值）。

2×2图像缩小了

该数组将如下所示：

// RED GREEN BLUE WHITE
[ 255, 0, 0, 255, 0, 255, 0, 255, 0, 0, 255, 255, 255, 255, 255, 255]

更改像素数据

我们可以做的最快的事情之一是通过将所有RGBA值更改为255来将所有像素设置为白色。

// Use a button to trigger the "effect"
var button = document.getElementById('Button');
button.addEventListener('click', onClick);
function changeToWhite(data) {
for (var i = 0; i < data.length; i++) {
data[i] = 255;
}
}
function onClick() {
var imageData = context.getImageData(0, 0, canvas.width, canvas.height);
 changeToWhite(imageData.data);
 // Update the canvas with the new data
context.putImageData(imageData, 0, 0);
}

数据将作为参考传递，这意味着我们对它做出的任何修改，它都会改变传递参数的值。

反转颜色

不需要太多计算的好效果就是反转图像的颜色。

可以使用XOR运算符（^）或此公式255 – 值（值必须介于0-255之间）来反转颜色值。

function invertColors(data) {
for (var i = 0; i < data.length; i+= 4) {
data[i] = data[i] ^ 255; // Invert Red
data[i+1] = data[i+1] ^ 255; // Invert Green
data[i+2] = data[i+2] ^ 255; // Invert Blue
}
}
function onClick() {
var imageData = context.getImageData(0, 0, canvas.width, canvas.height);
 invertColors(imageData.data);
 // Update the canvas with the new data
context.putImageData(imageData, 0, 0);
}

我们正在像前面那样将循环增加4而不是1，所以我们可以从像素到像素，每个像素填充数组中的4个元素。

alpha值对反转颜色没有影响，所以我们跳过它。

亮度和对比度

使用下面的公式可以调整图像的亮度：newValue = currentValue + 255 *（brightness / 100）。

亮度必须介于-100和100之间