别再问头像如何变灰了，试试这些滤镜效果

2024-01-20 19:11:43

简介

在实际工作中，有时我们会需要对图像应用滤镜效果，比如将图像变为黑白、调整图像亮度等。本文将介绍如何使用Canvas实现五种图像滤镜效果，核心代码不到70行，即使你对Canvas不熟悉，也可以轻松上手。

准备工作

首先，我们需要创建一个Canvas元素并获取其上下文对象：

<canvas id="canvas" width="500" height="500"></canvas>

<script>
  const canvas = document.getElementById('canvas');
  const ctx = canvas.getContext('2d');
</script>

然后，我们需要将需要处理的图像加载到Canvas中：

const image = new Image();
image.onload = function() {
  ctx.drawImage(image, 0, 0);
};
image.src = 'path/to/image.jpg';

灰度滤镜

灰度滤镜是将图像中的所有颜色转换为不同深浅的灰色。我们可以通过以下公式将图像中的每个像素转换为灰色：

gray = 0.2126 * r + 0.7152 * g + 0.0722 * b

其中，r、g、b分别为像素的红色、绿色和蓝色分量。

我们可以使用以下代码实现灰度滤镜：

const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
const data = imageData.data;
for (let i = 0; i < data.length; i += 4) {
  const gray = 0.2126 * data[i] + 0.7152 * data[i + 1] + 0.0722 * data[i + 2];
  data[i] = data[i + 1] = data[i + 2] = gray;
}
ctx.putImageData(imageData, 0, 0);

黑白滤镜

黑白滤镜是将图像中的所有颜色转换为黑色或白色。我们可以通过以下公式将图像中的每个像素转换为黑色或白色：

黑白 = (r + g + b) / 3 > 128 ? 255 : 0

其中，r、g、b分别为像素的红色、绿色和蓝色分量。

我们可以使用以下代码实现黑白滤镜：

const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
const data = imageData.data;
for (let i = 0; i < data.length; i += 4) {
  const bw = (data[i] + data[i + 1] + data[i + 2]) / 3 > 128 ? 255 : 0;
  data[i] = data[i + 1] = data[i + 2] = bw;
}
ctx.putImageData(imageData, 0, 0);

亮度滤镜

亮度滤镜是改变图像的整体亮度。我们可以通过以下公式改变图像的亮度：

亮度 = r * 亮度因子 + g * 亮度因子 + b * 亮度因子

其中，r、g、b分别为像素的红色、绿色和蓝色分量，亮度因子为一个介于0到1之间的数字，0表示完全黑暗，1表示完全明亮。

我们可以使用以下代码实现亮度滤镜：

const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
const data = imageData.data;
const brightnessFactor = 0.5; // 0-1之间，0表示完全黑暗，1表示完全明亮
for (let i = 0; i < data.length; i += 4) {
  data[i] = data[i] * brightnessFactor;
  data[i + 1] = data[i + 1] * brightnessFactor;
  data[i + 2] = data[i + 2] * brightnessFactor;
}
ctx.putImageData(imageData, 0, 0);

对比度滤镜

对比度滤镜是改变图像的对比度。我们可以通过以下公式改变图像的对比度：

对比度 = (r - 128) * 对比度因子 + 128

其中，r为像素的红色、绿色和蓝色分量之一，对比度因子为一个介于0到1之间的数字，0表示无对比度，1表示最大对比度。

我们可以使用以下代码实现对比度滤镜：

const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
const data = imageData.data;
const contrastFactor = 0.5; // 0-1之间，0表示无对比度，1表示最大对比度
for (let i = 0; i < data.length; i += 4) {
  data[i] = (data[i] - 128) * contrastFactor + 128;
  data[i + 1] = (data[i + 1] - 128) * contrastFactor + 128;
  data[i + 2] = (data[i + 2] - 128) * contrastFactor + 128;
}
ctx.putImageData(imageData, 0, 0);

饱和度滤镜

饱和度滤镜是改变图像的饱和度。我们可以通过以下公式改变图像的饱和度：

饱和度 = r * 饱和度因子 + g * 饱和度因子 + b * 饱和度因子

其中，r、g、b分别为像素的红色、绿色和蓝色分量，饱和度因子为一个介于0到1之间的数字，0表示完全不饱和，1表示完全饱和。

我们可以使用以下代码实现饱和度滤镜：

const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
const data = imageData.data;
const saturationFactor = 0.5; // 0-1之间，0表示完全不饱和，1表示完全饱和
for (let i = 0; i < data.length; i += 4) {
  data[i] = data[i] * saturationFactor;
  data[i + 1] = data[i + 1] * saturationFactor;
  data[i + 2] = data[i + 2] * saturationFactor;
}
ctx.putImageData(imageData, 0, 0);