使用 CamanJS 构建自定义滤镜和混合模式图像编辑器

1. 介绍

CamanJS 是一个 JavaScript 库，可以对图像进行编辑和处理，包括调整色彩、亮度、对比度、饱和度、滤镜和混合模式等。

本文将介绍如何使用 CamanJS 构建一个自定义滤镜和混合模式图像编辑器。

2. 准备工作

首先，在 HTML 文件中添加 CamanJS 库的链接：

  <script src="https://cdnjs.cloudflare.com/ajax/libs/camanjs/4.1.2/caman.full.min.js"></script>

接着，在 HTML 文件中创建一个画布元素和一个按钮元素：

  <canvas id="canvas"></canvas>
  <button onclick="applyFilter()">应用滤镜</button>

同时，在 JavaScript 文件中，获取画布元素的上下文并创建 CamanJS 实例:

  const canvas = document.getElementById('canvas');
  const ctx = canvas.getContext('2d');
  const image = new Image();
  image.src = 'image.jpg'; // 替换成你自己的图片路径
  image.onload = function() {
    canvas.width = image.width;
    canvas.height = image.height;
    ctx.drawImage(image, 0, 0, canvas.width, canvas.height);
    caman = Caman(canvas, function() {
      // 初始化 CamanJS 实例
    });
  };

3. 自定义滤镜

3.1 添加滤镜

CamanJS 内置了一些滤镜，你可以在初始化 CamanJS 实例时将这些滤镜添加到实例中。同时，你也可以创建自己的滤镜。我们将创建一个名为 "vintage" 的滤镜。

  Caman.Filter.register("vintage", function() {
    this.brightness(15);
    this.contrast(20);
    this.sepia(30);
    this.colorize('#f1efe5', 10);
    this.gamma(1.8);
  });

以上代码将创建一个名为 "vintage" 的滤镜，对应的滤镜效果为：增加亮度 15，提高对比度 20，添加乌贼墨色调 30，添加黄色色调 10，增加 gamma 1.8。

3.2 应用滤镜

在上一节中，我们成功创建了一个名为 "vintage" 的滤镜。现在，我们将这个滤镜应用到我们的图片上。

  caman.revert(false); // 重置到原始状态
  caman.vintage().render();

以上代码在 CamanJS 实例上调用 "vintage" 滤镜，并通过 "render" 方法应用到画布上。同时，我们还调用了 "revert" 方法将画布重置为原始状态，以便后续多次应用滤镜。

4. 自定义混合模式

4.1 添加混合模式

除了自定义滤镜，你也可以在 CamanJS 实例中添加自定义混合模式。我们将创建一个名为 "softLightBlend" 的混合模式。

  Caman.Blender.register("softLightBlend", function(rgbaLayer1, rgbaLayer2) {
    for (let i = 0; i < 3; i++) {
      rgbaLayer1[i] = (rgbaLayer1[i] < 128) 
        ? (2 * rgbaLayer1[i] * rgbaLayer2[i] / 255)
        : (255 - 2 * (255 - rgbaLayer1[i]) * (255 - rgbaLayer2[i]) / 255);
    }
    return rgbaLayer1;
  });

以上代码将创建一个名为 "softLightBlend" 的混合模式，对应的混合模式公式为：

  if (layer2 < 128) {
    result = (2 * layer1 * layer2) / 255;
  } else {
    result = 255 - (2 * (255 - layer1) * (255 - layer2)) / 255;
  }

4.2 应用混合模式

在上一节中，我们成功创建了一个名为 "softLightBlend" 的混合模式。现在，我们将这个混合模式应用到我们的图片上。

  caman.newLayer(function() {
    this.setBlendingMode("softLightBlend");
    this.opacity(70);
    this.fillColor("#ffcc00");
  });
  caman.render();

以上代码在 CamanJS 实例上创建了一个新的图层，设置了混合模式为 "softLightBlend" 并添加了一个黄色填充，最后通过 "render" 方法应用到画布上。

5. 完整代码

以下是完整代码。

  <canvas id="canvas"></canvas>
  <button onclick="applyFilter()">应用滤镜</button>

  const canvas = document.getElementById('canvas');
  const ctx = canvas.getContext('2d');
  const image = new Image();
  image.src = 'image.jpg'; // 替换成你自己的图片路径
  image.onload = function() {
    canvas.width = image.width;
    canvas.height = image.height;
    ctx.drawImage(image, 0, 0, canvas.width, canvas.height);
    caman = Caman(canvas, function() {
      // 初始化 CamanJS 实例
    });
  };
  Caman.Filter.register("vintage", function() {
    this.brightness(15);
    this.contrast(20);
    this.sepia(30);
    this.colorize('#f1efe5', 10);
    this.gamma(1.8);
  });
  Caman.Blender.register("softLightBlend", function(rgbaLayer1, rgbaLayer2) {
    for (let i = 0; i < 3; i++) {
      rgbaLayer1[i] = (rgbaLayer1[i] < 128) 
        ? (2 * rgbaLayer1[i] * rgbaLayer2[i] / 255)
        : (255 - 2 * (255 - rgbaLayer1[i]) * (255 - rgbaLayer2[i]) / 255);
    }
    return rgbaLayer1;
  });
  function applyFilter() {
    caman.revert(false);
    caman.vintage().render();
    caman.newLayer(function() {
      this.setBlendingMode("softLightBlend");
      this.opacity(70);
      this.fillColor("#ffcc00");
    });
    caman.render();
  }