基于JavaScript实现图片滤镜效果

1. 简介

图片滤镜是指将特定的效果应用到图片上，从而达到视觉上的艺术效果。现在的图片编辑软件和手机应用程序提供了许多不同类型的滤镜，如黑白、模糊、曝光、对比度等。本文将介绍如何基于JavaScript实现图片滤镜效果。

2. 实现步骤

2.1 获取图片

首先，需要使用JavaScript获取图像，可以通过以下代码实现：

const img = document.getElementById('myImage');

其中“myImage”是图片标签的ID，这里使用了getElementById()方法。也可以使用其他获取元素的方法。

2.2 创建画布

接下来，需要创建一个画布来绘制处理后的图像。可以使用以下代码：

const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
canvas.width = img.width;
canvas.height = img.height;
ctx.drawImage(img, 0, 0, canvas.width, canvas.height);

这里使用了HTML5的Canvas API，首先创建canvas元素，然后使用getContext()方法获取2D上下文。设置画布的宽度和高度与原始图像相同，并使用drawImage()方法将原始图像绘制到画布上。

2.3 应用滤镜效果

最后，可以应用滤镜效果到图像上。在本例中，将使用hue-rotate() CSS滤镜来改变图片的颜色。以下是实现代码：

const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
const data = imageData.data;
for (let i = 0; i < data.length; i += 4) {
  // 获取像素的RGB值
  let r = data[i];
  let g = data[i + 1];
  let b = data[i + 2];
  // 转换为HSL颜色
  const hsl = rgbToHsl(r, g, b);
  // 转换颜色
  hsl[0] = (hsl[0] + 180) % 360;
  hsl[2] = Math.max(0, Math.min(1, hsl[2] * 0.6));
  // 转换回RGB值
  const rgb = hslToRgb(hsl[0], hsl[1], hsl[2]);
  data[i] = rgb[0];
  data[i + 1] = rgb[1];
  data[i + 2] = rgb[2];
}
ctx.putImageData(imageData, 0, 0);
function rgbToHsl(r, g, b) {
  r /= 255, g /= 255, b /= 255;
  const max = Math.max(r, g, b);
  const min = Math.min(r, g, b);
  let h, s, l = (max + min) / 2;
  if (max == min) {
    h = s = 0;
  }
  else {
    const d = max - min;
    s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
    switch (max) {
      case r:
        h = (g - b) / d + (g < b ? 6 : 0);
        break;
      case g:
        h = (b - r) / d + 2;
        break;
      case b:
        h = (r - g) / d + 4;
        break;
    }
    h /= 6;
  }
  return [h * 360, s, l];
}
function hslToRgb(h, s, l) {
  let r, g, b;
  if (s == 0) {
    r = g = b = l;
  }
  else {
    function hue2rgb(p, q, t) {
      if (t < 0) t += 1;
      if (t > 1) t -= 1;
      if (t < 1 / 6) return p + (q - p) * 6 * t;
      if (t < 1 / 2) return q;
      if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;
      return p;
    }
    const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
    const p = 2 * l - q;
    r = hue2rgb(p, q, h + 1 / 3);
    g = hue2rgb(p, q, h);
    b = hue2rgb(p, q, h - 1 / 3);
  }
  return [r * 255, g * 255, b * 255];
}

将canvas的像素RGB值转换为HSL颜色，然后旋转色相（hue）180度，降低亮度（lightness）为原来的60%。最后将HSL颜色值转换回RGB，并将像素的RGB值更新。

3. 总结

本文介绍了如何使用JavaScript实现图片滤镜效果。使用Canvas API可以轻松地获取和操作图像数据，通过颜色转换算法可以将图像的颜色进行处理。可以根据需要自定义各种滤镜效果，从而实现更多样化的呈现效果。