canvas像素级操作实现滤镜之灰度效果、怀旧滤镜

灰度化原理：按照.299 * r + .587 * g + .114 * b来计算，然后将值赋给rgb分量

代码：

//灰度效果：(去色)
function gray_Filter(data) {

for (i = 0; i < data.length - 4; i += 4) { //遍历各像素分量	.299 * r + .587 * g + .114 * b;
var tmp = data[i] * 0.299 + data[i + 1] * 0.587 + data[i + 2] * 0.144;

data[i] = data[i + 1] = data[i + 2] = tmp;
}

return data;
}

怀旧滤镜原理:

1.首先对图像重新计算RGB值,计算公式如下：

var dr=.393*r+.769*g+.189*b;

var dg=.349*r+.686*g+.168*b;

var db=.272*r+.534*g+.131*b;

2.对图像计算出来的新的RGB值根据随机权重与旧值混合，权重值公式如下：

var scale=Math.random()*0.5 + 0.5;

3.混合公式如下：var fr=scale*dr+(1-scale)*r;

实现：

//怀旧滤镜：
function reminiscence_Filter(data) {

for (i = 0; i < data.length - 4; i += 4) { //遍历各像素分量
var dr = .393 * data[i] + .769 * data[i + 1] + .189 * data[i + 2];
var dg = .349 * data[i] + .686 * data[i + 1] + .168 * data[i + 2];
var db = .272 * data[i] + .534 * data[i + 1] + .131 * data[i + 2];

var scale = Math.random() * 0.5 + 0.5;

data[i] = scale * dr + (1 - scale) * data[i];
scale = Math.random() * 0.5 + 0.5;
data[i + 1] = scale * dg + (1 - scale) * data[i + 1];
scale = Math.random() * 0.5 + 0.5;
data[i + 2] = scale * db + (1 - scale) * data[i + 2];
}

return data;
}