使用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默认设置为。

这意味着您在画布上添加的任何新图层都会使其下方的图层不可见。该库共有十种混合模式。它们是normal, multiply, screen, overlay, difference, addition, exclusion, softLight, exclusion, 和darken。

正如我之前提到的，normal混合模式将最终颜色设置为与新图层的颜色相同。multiply混合模式通过将各个通道相乘然后将结果除以 255 来确定像素的最终颜色。和difference混合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();
    });
});

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

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

使用CamanJS创建图像编辑器：图层、混合模式和事件第1张

CamanJS 中的事件

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

大图像有很多像素，在应用特定的混合模式后计算每个像素的不同通道的最终值可能非常耗时。例如，在 multiply尺寸为 1920*1080 的图像上应用混合模式时，设备将需要执行超过 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事件，您可以访问当前在图像上运行的进程的名称。另一方面，and 事件使您可以访问诸如块总数、正在处理的当前块和已完成块的数量等信息blockStarted。blockFinished

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

使用CamanJS创建图像编辑器：图层、混合模式和事件第2张