基于JavaScript开发图片滤镜效果

1.前言

随着前端技术的发展，越来越多的特效被应用到了网页中，其中图片滤镜效果便是其中之一。下面将介绍如何使用JavaScript语言实现一款基于滤镜效果的图片处理器。

2.搭建环境

2.1 安装Canvas

Canvas是HTML5新增的标签，它能够通过JavaScript脚本绘制2D图形，是我们实现图片处理器的重要工具。下面我们需要在html文件中添加Canvas标签，代码如下：

<canvas id="canvas"></canvas>

然后在JavaScript中获取Canvas元素：

const canvas = document.getElementById('canvas');

我们还需要指定Canvas的宽和高：

canvas.width = image.width;

canvas.height = image.height;

2.2 获取图片

要对图片进行处理，我们首先需要获取图片的二进制数据。可以通过使用FileReader对象将本地图片转换为base64编码的字符串

const reader = new FileReader();

reader.readAsDataURL(file);
reader.onload = () => {
  const img = new Image();
  img.src = reader.result;
  img.onload = () => {
    //逻辑处理
  };
};

3.实现图片滤镜效果

3.1 网格滤镜

网格滤镜是一种比较简单的滤镜效果，其原理是将图片分成小块，再将每一块的颜色值随机替换为附近的一块颜色值，达到一种像素化的效果。具体实现代码如下：

const gridFilter = (ctx, imgData, gridLength) => {

  const pixels = imgData.data;
  const width = imgData.width;
  const height = imgData.height;
  const grids = []; // 存储每一块的颜色值
  
  // 将图片分块
  for (let i = 0; i < height; i += gridLength) {
    for (let j = 0; j < width; j += gridLength) {
      const index = (i * 4) * width + j * 4;
      const r = pixels[index];
      const g = pixels[index + 1];
      const b = pixels[index + 2];
      grids.push([r, g, b, j, i]);
    }
  }
  
  // 随机取一块颜色值替换为附近的颜色值
  for (let i = 0; i < grids.length; i++) {
    const x1 = Math.max(grids[i][3] - gridLength, 0);
    const y1 = Math.max(grids[i][4] - gridLength, 0);
    const x2 = Math.min(grids[i][3] + gridLength, width);
    const y2 = Math.min(grids[i][4] + gridLength, height);
    const randomIndex = Math.floor(Math.random() * (x2 - x1) * (y2 - y1)) + y1 * width + x1;
    pixels[grids[i][4] * width * 4 + grids[i][3] * 4] = pixels[randomIndex * 4];
    pixels[grids[i][4] * width * 4 + grids[i][3] * 4 + 1] = pixels[randomIndex * 4 + 1];
    pixels[grids[i][4] * width * 4 + grids[i][3] * 4 + 2] = pixels[randomIndex * 4 + 2];
  }
  ctx.putImageData(imgData, 0, 0);
};

3.2 灰度滤镜

灰度滤镜是将图像从彩色变成黑白的滤镜效果。实现方法是将R、G、B三个颜色通道的值取平均值作为灰度值，然后将R、G、B值同时设置为这个平均值。

const greyFilter = (ctx, imgData) => {

  const pixels = imgData.data;
  const len = pixels.length;
  for (let i = 0; i < len; i += 4) {
    const grey = (pixels[i] + pixels[i + 1] + pixels[i + 2]) / 3;
    pixels[i] = grey;
    pixels[i + 1] = grey;
    pixels[i + 2] = grey;
  }
  ctx.putImageData(imgData, 0, 0);
};

3.3 色调分离滤镜

色调分离滤镜是一种比较特殊的滤镜效果，它将图像的颜色分成几个级别，再将每个级别的颜色映射到不同的颜色上面去。

const colorFilter = (ctx, imgData, level) => {

  const pixels = imgData.data;
  const len = pixels.length;
  const step = Math.floor(255 / level);
  for (let i = 0; i < len; i += 4) {
    const r = Math.floor(pixels[i] / step) * step;
    const g = Math.floor(pixels[i + 1] / step) * step;
    const b = Math.floor(pixels[i + 2] / step) * step;
    pixels[i] = r;
    pixels[i + 1] = g;
    pixels[i + 2] = b;
  }
  ctx.putImageData(imgData, 0, 0);
};

4.总结

通过本文的介绍，我们了解到了如何使用JavaScript语言实现一款基于滤镜效果的图片处理器，并且介绍了三种滤镜效果的实现方法：网格滤镜、灰度滤镜和色调分离滤镜。使用这些滤镜效果能够使图片更加具有个性化和艺术感。