Canvas实现滤镜效果，用JavaScript点亮创意图像

2023-09-29 23:08:24

在充满活力的数字世界中，图像滤镜已经成为一种至关重要的元素，它们能够将图像美化、增强，甚至赋予其别样的艺术风格。那么，作为一名前端开发人员，如何利用Canvas在浏览器中实现炫酷的滤镜效果呢？现在就让我们踏上奇妙的滤镜之旅，看看如何用JavaScript和Canvas点亮创意图像！

1. Canvas准备就绪

首先，我们需要一个Canvas元素作为我们的画板。Canvas是一个神奇的元素，它允许我们使用JavaScript直接控制像素数据，为图像处理打开了一扇大门。

<canvas id="canvas" width="600" height="400"></canvas>

在HTML代码中添加这段代码，你就会看到一个空白的Canvas元素呈现在页面上，它准备着承载你即将创作的精彩图像。

2. 读入图像数据

接下来，我们使用JavaScript从图片文件中读取图像数据。

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
const image = new Image();
image.onload = () => {
  ctx.drawImage(image, 0, 0);
};
image.src = "image.jpg";

在这个代码片段中，我们先获取了Canvas元素和它的上下文（context），然后创建了一个Image对象，并在它加载完成时将图像绘制到Canvas上。现在，图像已整装待发，等待着我们的滤镜魔法。

3. 滤镜大显身手

现在，让我们来揭开滤镜的神秘面纱。滤镜本质上是对图像像素数据进行处理，从而产生各种特殊效果。

灰度滤镜

灰度滤镜是滤镜世界中的一位元老，它能将图像转换成经典的黑白效果。

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

这段代码首先获取图像数据，然后遍历每个像素，将它的RGB值转换为灰度值，最后将处理后的数据重新绘制回Canvas上。

模糊滤镜

模糊滤镜可以使图像变得柔和而富有艺术感。

const blur = () => {
  const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
  const data = imageData.data;
  for (let i = 0; i < data.length; i += 4) {
    const avg =
      (data[i] +
        data[i - 4] +
        data[i + 4] +
        data[i + canvas.width * 4] +
        data[i - canvas.width * 4]) /
      5;
    data[i] = data[i + 1] = data[i + 2] = avg;
  }
  ctx.putImageData(imageData, 0, 0);
};

这个代码片段通过计算相邻像素的平均值来模糊图像。

怀旧滤镜

怀旧滤镜可以为图像赋予一种复古的色调。

const sepia = () => {
  const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
  const data = imageData.data;
  for (let i = 0; i < data.length; i += 4) {
    const r = data[i] * 0.393 + data[i + 1] * 0.769 + data[i + 2] * 0.189;
    const g = data[i] * 0.349 + data[i + 1] * 0.686 + data[i + 2] * 0.168;
    const b = data[i] * 0.272 + data[i + 1] * 0.534 + data[i + 2] * 0.131;
    data[i] = r;
    data[i + 1] = g;
    data[i + 2] = b;
  }
  ctx.putImageData(imageData, 0, 0);
};