一:实现原理

图像滤效果的体现，本质是对图像像素值的处理，获取到每一图像的所有像素值，然后加以处理，就可以得到我们想要的所有效果

canvas提供了context.getImageData()方法，得到的是一个一维数组：类似[RGBARGBARGBARGBA...];每四个值凑成了对应像素的rgba值，所以可以对此做相关处理，然后通过context.putImageData()方法，写入得到想要的滤镜效果

二:颜色反转

反转颜色的核心算法部分是获取一个像素点RGB值r, g, b则新的RGB值为(255-r, 255-g, 255-b),通过以下公式计算新值

                                            
nr = 255 - r;
ng = 255 - g;
nb = 255 - b;
a= 255;
                                            
                                        

核心代码如下

                                            
let image = document.getElementById('img');
image.onload = function () {
    let canvas = document.getElementById('ResultCanvas'),
        context = canvas.getContext('2d'),
        width = canvas.width = image.width,
        height = canvas.height = image.height;
    context.drawImage(image, 0, 0, width, height);
    let canvasData = context.getImageData(0, 0, canvas.width, canvas.height);
    for (let x = 0; x < canvasData.width; x++) {
        for (let y = 0; y < canvasData.height; y++) {
            var idx = (x + y * canvasData.width) * 4;
            // 图像颜色反转 
            canvasData.data[idx + 0] = 255 - canvasData.data[idx + 0];
            canvasData.data[idx + 1] = 255 - canvasData.data[idx + 1];
            canvasData.data[idx + 2] = 255 - canvasData.data[idx + 2];
            canvasData.data[idx + 3] = 255;
        }
    }
    context.putImageData(canvasData, 0, 0);
}
                                            
                                        

比对效果:

三:图像灰度化

1、彩色转灰度，在这里用到著名的心理学公式

                                            
Gray = R*0.299 + G*0.587 + B*0.114
                                            
                                        

2、核心代码如下：

                                            
let r = canvasData.data[idx + 0];
let g = canvasData.data[idx + 1];
let b = canvasData.data[idx + 2];
let gray = .299 * r + .587 * g + .114 * b;
canvasData.data[idx + 0] = gray;
canvasData.data[idx + 1] = gray;
canvasData.data[idx + 2] = gray;
canvasData.data[idx + 3] = 255;
                                            
                                        

比对效果