JS封装cavans多种滤镜组件

JS封装Cavans多种滤镜组件攻略

在本攻略中，我们将讲解如何通过JavaScript来实现对Cavans多种滤镜的封装。主要囊括了以下内容：

• 需求分析
• 功能实现
• 示例代码

需求分析

我们需要实现一个Cavans滤镜的组件，具有以下功能：

• 支持黑白滤镜效果
• 支持模糊滤镜效果
• 支持浮雕滤镜效果
• 支持自定义滤镜效果

功能实现

1. 创建Canvas对象

var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');

2. 封装黑白滤镜

黑白滤镜实现方法是将图片像素点的 RGB 值取平均值，然后将 R、G、B 三个值重新赋值为平均值（即转为黑白颜色），具体代码如下:

function blackAndWhite(src, imgWidth, imgHeight) {
  canvas.width = imgWidth;
  canvas.height = imgHeight;

  // 将图片绘制到canvas中
  context.drawImage(src, 0, 0, imgWidth, imgHeight);

  // 获取图片的像素信息
  var imageData = context.getImageData(0, 0, imgWidth, imgHeight);
  var pixels = imageData.data;

  // 黑白效果处理
  for(var i = 0; i < pixels.length; i+=4) {
    var r = pixels[i];
    var g = pixels[i+1];
    var b = pixels[i+2];

    // 计算 RGB 平均值
    var mean = (r+g+b)/3;

    // 重新赋值 RGB
    pixels[i] = mean;
    pixels[i+1] = mean;
    pixels[i+2] = mean;
  }

  // 将处理后的像素点重新生成图像
  context.putImageData(imageData, 0, 0);

  return canvas.toDataURL();
}

3. 封装模糊滤镜

模糊滤镜实现方法是将图片的像素点进行高斯模糊处理，具体代码如下:

function blur(src, imgWidth, imgHeight, blurAmount) {
  canvas.width = imgWidth;
  canvas.height = imgHeight;

  // 将图片绘制到canvas中
  context.drawImage(src, 0, 0, imgWidth, imgHeight);

  // 将处理后的像素点重新生成图像
  var imageData = context.getImageData(0, 0, imgWidth, imgHeight);
  var pixels = imageData.data;
  StackBlur.imageDataRGBA(imageData, 0, 0, imgWidth, imgHeight, blurAmount);

  // 将处理后的像素点重新生成图像
  context.putImageData(imageData, 0, 0);

  return canvas.toDataURL();
}

4. 封装浮雕滤镜

浮雕滤镜实现方法是将图片的像素点进行浮雕处理，具体代码如下:

function emboss(src, imgWidth, imgHeight) {
  canvas.width = imgWidth;
  canvas.height = imgHeight;

  // 将图片绘制到canvas中
  context.drawImage(src, 0, 0, imgWidth, imgHeight);

  // 获取图片的像素信息
  var imageData = context.getImageData(0, 0, imgWidth, imgHeight);
  var pixels = imageData.data;

  // 浮雕效果处理
  for(var i = 0; i < pixels.length; i+=4) {
    var r = pixels[i];
    var g = pixels[i+1];
    var b = pixels[i+2];
    var a = pixels[i+3];

    var rNext = pixels[i+4];
    var gNext = pixels[i+5];
    var bNext = pixels[i+6];

    pixels[i] = Math.abs(rNext - r + 128);
    pixels[i+1] = Math.abs(gNext - g + 128);
    pixels[i+2] = Math.abs(bNext - b + 128);
  }

  // 将处理后的像素点重新生成图像
  context.putImageData(imageData, 0, 0);

  return canvas.toDataURL();
}

5. 自定义滤镜

我们可以通过自定义滤镜，实现更多的滤镜效果。这里提供一个简单的示例代码，以模拟半透明效果：

function translucent(src, imgWidth, imgHeight, alpha) {
  canvas.width = imgWidth;
  canvas.height = imgHeight;

  // 将图片绘制到canvas中
  context.globalAlpha = alpha;
  context.drawImage(src, 0, 0, imgWidth, imgHeight);

  // 将处理后的像素点重新生成图像
  var dataUrl = canvas.toDataURL();
  context.globalAlpha = 1;
  return dataUrl;
}

示例代码

将上述封装代码做整合，形成一个完整的Cavans滤镜组件，如下：

var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');

function blackAndWhite(src, imgWidth, imgHeight) {
  canvas.width = imgWidth;
  canvas.height = imgHeight;

  // 将图片绘制到canvas中
  context.drawImage(src, 0, 0, imgWidth, imgHeight);

  // 获取图片的像素信息
  var imageData = context.getImageData(0, 0, imgWidth, imgHeight);
  var pixels = imageData.data;

  // 黑白效果处理
  for(var i = 0; i < pixels.length; i+=4) {
    var r = pixels[i];
    var g = pixels[i+1];
    var b = pixels[i+2];

    // 计算 RGB 平均值
    var mean = (r+g+b)/3;

    // 重新赋值 RGB
    pixels[i] = mean;
    pixels[i+1] = mean;
    pixels[i+2] = mean;
  }

  // 将处理后的像素点重新生成图像
  context.putImageData(imageData, 0, 0);

  return canvas.toDataURL();
}

function blur(src, imgWidth, imgHeight, blurAmount) {
  canvas.width = imgWidth;
  canvas.height = imgHeight;

  // 将图片绘制到canvas中
  context.drawImage(src, 0, 0, imgWidth, imgHeight);

  // 将处理后的像素点重新生成图像
  var imageData = context.getImageData(0, 0, imgWidth, imgHeight);
  var pixels = imageData.data;
  StackBlur.imageDataRGBA(imageData, 0, 0, imgWidth, imgHeight, blurAmount);

  // 将处理后的像素点重新生成图像
  context.putImageData(imageData, 0, 0);

  return canvas.toDataURL();
}

function emboss(src, imgWidth, imgHeight) {
  canvas.width = imgWidth;
  canvas.height = imgHeight;

  // 将图片绘制到canvas中
  context.drawImage(src, 0, 0, imgWidth, imgHeight);

  // 获取图片的像素信息
  var imageData = context.getImageData(0, 0, imgWidth, imgHeight);
  var pixels = imageData.data;

  // 浮雕效果处理
  for(var i = 0; i < pixels.length; i+=4) {
    var r = pixels[i];
    var g = pixels[i+1];
    var b = pixels[i+2];
    var a = pixels[i+3];

    var rNext = pixels[i+4];
    var gNext = pixels[i+5];
    var bNext = pixels[i+6];

    pixels[i] = Math.abs(rNext - r + 128);
    pixels[i+1] = Math.abs(gNext - g + 128);
    pixels[i+2] = Math.abs(bNext - b + 128);
  }

  // 将处理后的像素点重新生成图像
  context.putImageData(imageData, 0, 0);

  return canvas.toDataURL();
}

function translucent(src, imgWidth, imgHeight, alpha) {
  canvas.width = imgWidth;
  canvas.height = imgHeight;

  // 将图片绘制到canvas中
  context.globalAlpha = alpha;
  context.drawImage(src, 0, 0, imgWidth, imgHeight);

  // 将处理后的像素点重新生成图像
  var dataUrl = canvas.toDataURL();
  context.globalAlpha = 1;
  return dataUrl;
}

上述代码中，我们使用了 StackBlur 算法实现模糊效果。具体实现方式如下：

<script src="js/StackBlur.js"></script>