使用 CamanJS 开发图像编辑工具：探索图层、混合模式和事件处理

在上一教程中，您学习了如何使用 CamanJS 创建图像编辑器，该编辑器可以对图像应用对比度、亮度和噪声等基本滤镜。 CamanJS 还有一些其他内置滤镜，如怀旧、针孔、日出等，我们直接将其应用到图像上。

在本教程中，我们将介绍该库的一些更高级的功能，例如图层、混合模式和事件。

CamanJS 中的层

在第一个教程中，我们仅使用包含图像的单个图层。我们应用的所有过滤器仅操纵该主层。 CamanJS 允许您创建多个图层，以便您能够以更复杂的方式编辑图像。您可以创建嵌套图层，但它们将始终像堆栈一样应用到其父图层上。

每当您创建新图层并将其应用到父图层时，使用的默认混合模式将为 normal。您可以使用 newLayer() 方法在画布上创建一个新图层。当您创建新图层时，您还可以传递一个回调函数，如果您打算操作图层，该函数将很有用。

此函数可用于许多任务，例如使用 setBlendingMode() 方法设置新图层的混合模式。同样，您可以使用 opacity() 方法控制新图层的不透明度。

您创建的任何新图层都可以使用 fillColor() 方法填充纯色。您还可以使用 copyParent() 方法将父层的内容复制到新层。我们在上一个教程中学到的所有过滤器也可以应用于我们正在创建的新图层。例如，您可以使用 this.filter.brightness(10) 增加新创建图层的亮度。

您还可以选择加载图层中的任何其他图像并将其覆盖在父级上，而不是复制父级或使用纯色填充图层。就像主图像一样，您也可以对叠加图像应用不同的滤镜。

在下面的代码片段中，我们将一个单击事件处理程序附加到三个按钮，这三个按钮将分别用纯色、父图层和覆盖图像填充新图层。

$('#orange-btn').on('click', function (e) {
    Caman("#canvas", function () {
        this.newLayer(function () {
            this.opacity(50);
            this.fillColor('#ff9900');
        });
        this.render();
    });
});

$('#parent-btn').on('click', function (e) {
    Caman("#canvas", function () {
        this.newLayer(function () {
            this.opacity(50);
            this.copyParent();
            this.filter.brightness(20);
        });
        this.render();
    });
});

$('#overlay-btn').on('click', function (e) {
    var oImg = new Image();
    oImg.src = "trees.png";
    
    Caman("#canvas", function () {
        this.newLayer(function () {
            this.opacity(50);
            this.overlayImage(oImg);
            this.filter.brightness(20);
        });
        this.render();
    });
});

CamanJS 中的混​​合模式

在上一节中，我们将添加到画布的任何新图层的不透明度保持在 100 以下。这样做是因为新图层将完全隐藏旧图层。当您将一层放置在另一层上时，CamanJS 允许您指定混合模式，该模式决定放置后的最终结果。混合模式默认设置为 normal 。

这意味着您在画布上添加的任何新图层都会使其下面的图层不可见。该库共有十种混合模式。这些是 正常、乘法、屏幕、覆盖、差异、添加、排除、softLight、排除 和暗化。

正如我之前提到的，normal 混合模式将最终颜色设置为等于新图层的颜色。 multiply 混合模式通过将各个通道相乘，然后将结果除以 255 来确定像素的最终颜色。 multiply 和 addition 的区别混合模式的工作方式类似，但它们会减去和添加通道。

darken 混合模式将像素的最终颜色设置为等于各个颜色通道的最低值。 lighten 混合模式将像素的最终颜色设置为等于各个颜色通道的最高值。 exclusion 混合模式与 difference 有点相似，但它将对比度设置为较低的值。在 screen 混合模式的情况下，最终颜色是通过反转每层的颜色、相乘，然后再次反转结果来获得的。

如果底部颜色较深，则 overlay 混合模式的作用类似于 multiply；如果底部颜色较浅，则其作用类似于 screen。

如果您希望不同图层中的颜色以不同的方式交互，CamanJS 还允许您定义自己的混合模式。我们将在本系列的下一个教程中介绍这一点。

以下是在图像上应用不同混合模式的 JavaScript 代码：

$('#multiply-btn').on('click', function (e) {
    hexColor = $("#hex-color").val();
    Caman("#canvas", function () {
        this.revert(false);
        this.newLayer(function () {
            this.fillColor(hexColor);
            this.setBlendingMode('multiply');
        });
        this.render();
    });
});

$('#screen-btn').on('click', function (e) {
    hexColor = $("#hex-color").val();
    Caman("#canvas", function () {
        this.revert(false);
        this.newLayer(function () {
            this.fillColor(hexColor);
            this.setBlendingMode('screen');
        });
        this.render();
    });
});

在上面的代码片段中，我们从输入字段获取十六进制颜色值。然后将该颜色应用到新图层上。您可以编写代码以类似的方式应用其他混合模式。

尝试在输入字段中指定您选择的颜色，然后通过单击相应的按钮应用任何混合模式。在示例中，我已将混合模式应用于纯色，但您也可以将它们应用于上一节中的重叠图像。

[wpcc-iframe src=”https://codepen.io/Shokeen/embed/MrvMeW/?height=620&theme-id=0&default-tab=result&embed-version=2″ allowfullscreen=”true” scrolling=”no” width=”850″ height=”650″ frameborder=”no” loading=”lazy”]

CamanJS 中的事件

如果您在第一个教程或第二个教程的演示中上传了任何大图像，您可能会注意到，任何应用的滤镜或混合模式的结果在很长一段时间后变得明显。

大图像具有大量像素，在应用特定混合模式后计算每个像素的不同通道的最终值可能非常耗时。例如，当对尺寸为 1920*1080 的图像应用 multiply 混合模式时，设备必须执行超过 600 万次乘法和除法。

在这种情况下，您可以使用事件向用户提供有关滤镜或混合模式进度的一些指示。 CamanJS 有五个不同的事件，可用于在不同阶段执行特定的回调函数。这五个事件是 processStart、processComplete、renderFinished、blockStarted 和 blockFinished。

processStart 和 processComplete 事件在单个过滤器开始或完成其渲染过程后触发。当您指定的所有过滤器都已应用于图像时，库将触发 renderFinished 事件。

CamanJS 在开始操作之前将大图像分成块。 blockStarted 和 blockFinished 事件在库处理完图像的各个块后触发。

在我们的示例中，我们将仅使用 processStart 和 renderFinished 事件来通知用户图像编辑操作的进度。

Caman.Event.listen("processStart", function (process) {
    $(".process-message").text('Applying ' + process.name);
});
Caman.Event.listen("renderFinished", function () {
    $(".process-message").text("Done!");
});

通过 processStart 和 processFinish 事件，您可以访问当前在图像上运行的进程的名称。另一方面，blockStarted 和 blockFinished 事件使您可以访问块总数、当前正在处理的块以及已完成块的数量等信息。

尝试单击下面演示中的任何按钮，您将在画布下方的区域中看到当前操作图像的进程的名称。

[wpcc-iframe src=”https://codepen.io/Shokeen/embed/JMygbB/?height=620&theme-id=0&default-tab=result&embed-version=2″ allowfullscreen=”true” scrolling=”no” width=”850″ height=”650″ frameborder=”no” loading=”lazy”]

最终想法

本系列的第一个教程向您展示了如何使用 CamanJS 库中的内置滤镜创建基本图像编辑器。本教程向您展示了如何处理多个图层以及如何对每个图层单独应用不同的滤镜和混合模式。

由于大图像的图像编辑过程可能需要一段时间，因此我们还学习了如何向用户表明图像编辑器实际上正在处理图像而不是闲置。

在本系列的下一个也是最后一个教程中，您将学习如何在 CamanJS 中创建自己的混合模式和滤镜。如果您对本教程有任何疑问，请随时在评论中告诉我。