使用CamanJS创建图像编辑器：图层，混合模式和事件

在上一教程中 ，您学习了如何使用CamanJS创建图像编辑器，该编辑器可以对图像应用诸如对比度，亮度和噪点之类的基本滤镜。 CamanJS还具有其他一些内置过滤器，例如Nostalgia，Pinhole，Sunrise等，我们直接将其应用于图像。

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

CamanJS中的图层

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

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

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

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

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

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

$('#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();
    });
});

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

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

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事件使您可以访问信息，例如块总数，正在处理的当前块以及已完成的块数。

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

最后的想法

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

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

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

翻译自: https://code.tutsplus.com/tutorials/creating-an-image-editor-using-camanjs-layers-blend-modes-and-events--cms-30252