Content Table
2017-06-22

Canvas 像素数据处理

Canvas 的 context 调用 getImageData() 获取 canvas 中图片的像素数据，处理好后再调用 putImageData() 设置回 canvas。

1
2
3
4
5
6
7
8
var canvas = $('#canvas').get(0);
canvas.width = 500; // canvas 的实际宽度，默认是 300
canvas.height = 300;
var ctx = canvas.getContext('2d');

var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height); // 获取像素数据
grayscale(imageData); // 处理像素数据
ctx.putImageData(imageData, 0, 0); // 设置回 canvas

灰度效果

1
2
3
4
5
6
7
8
9
10
11
// 灰度效果（grayscale）就是取红、绿、蓝三个像素值的算术平均值，这实际上将图像转成了黑白形式。
function grayscale(pixels) {
    var d = pixels.data; // d 是一个 rgba 的整数数组

    for (var i = 0; i < d.length; i += 4) {
        var r = d[i];
        var g = d[i + 1];
        var b = d[i + 2];
        d[i] = d[i + 1] = d[i + 2] = (r + g + b) / 3;
    }
}

d 是一个像素颜色分量的整数数组，每 4 个值对应一个像素的 4 个颜色分量 rgba:

  • d[i+0] 为红色值
  • d[i+1] 为绿色值
  • d[i+2] 为蓝色值
  • d[i+3] 为 alpha 通道值

复古效果

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// 复古效果（sepia）则是将红、绿、蓝三个像素，分别取这三个值的某种加权平均值，使得图像有一种古旧的效果。
function siepa(pixels) {
    var d = pixels.data; // d 是一个 rgba 的整数数组

    for (var i = 0; i < d.length; i += 4) {
        var r = d[i];
        var g = d[i + 1];
        var b = d[i + 2];

        d[i] = (r * 0.393) + (g * 0.769) + (b * 0.189); // red
        d[i + 1] = (r * 0.349) + (g * 0.686) + (b * 0.168); // green
        d[i + 2] = (r * 0.272) + (g * 0.534) + (b * 0.131); // blue
    }
}

红色蒙版

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// 红色蒙版指的是，让图像呈现一种偏红的效果。
// 算法是将红色通道设为红、绿、蓝三个值的平均值，而将绿色通道和蓝色通道都设为 0。
function red(pixels) {
    var d = pixels.data; // d 是一个 rgba 的整数数组

    for (var i = 0; i < d.length; i += 4) {
        var r = d[i];
        var g = d[i + 1];
        var b = d[i + 2];

        d[i] = (r + g + b) / 3; // 红色通道取平均值
        d[i + 1] = d[i + 2] = 0; // 绿色通道和蓝色通道都设为 0
    }
}

亮度效果

1
2
3
4
5
6
7
8
9
10
// 亮度效果（brightness）是指让图像变得更亮或更暗。算法将红色通道、绿色通道、蓝色通道，同时加上一个正值或负值。
function brightness(pixels, delta) {
    var d = pixels.data; // d 是一个 rgba 的整数数组

    for (var i = 0; i < d.length; i += 4) {
        d[i] += delta;
        d[i + 1] += delta;
        d[i + 2] += delta;
    }
}

反转效果

1
2
3
4
5
6
7
8
9
10
// 反转效果（invert）是指图片呈现一种色彩颠倒的效果。算法为红、绿、蓝通道都取各自的相反值（255-原值）。
function invert(pixels, delta) {
    var d = pixels.data; // d 是一个 rgba 的整数数组

    for (var i = 0; i < d.length; i += 4) {
        d[i] = 255 - d[i];
        d[i + 1] = 255 - d[i + 1];
        d[i + 2] = 255 - d[i + 2];
    }
}