Develop image editing tools with CamanJS: Explore layers, blending modes, and event handling

In the previous tutorial, you learned how to use CamanJS to create an image editor that can apply basic filters such as contrast, brightness, and noise to images. CamanJS also has some other built-in filters like nostalgia, pinhole, sunrise, etc. that we apply directly to the image.

In this tutorial, we will introduce some of the more advanced features of the library, such as layers, blend modes, and events.

Layers in CamanJS

In this first tutorial, we only use a single layer containing the image. All filters we apply only manipulate this main layer. CamanJS allows you to create multiple layers so that you can edit images in more complex ways. You can create nested layers, but they will always be applied to their parent layer like a stack.

Whenever you create a new layer and apply it to a parent layer, the default blending mode used will be normal. You can create a new layer on the canvas using the newLayer() method. When you create a new layer, you can also pass a callback function, which can be useful if you plan to manipulate the layer.

This function can be used for many tasks, such as setting the blending mode of a new layer using the setBlendingMode() method. Likewise, you can control the opacity of the new layer using the opacity() method.

Any new layer you create can be filled with a solid color using the fillColor() method. You can also use the copyParent() method to copy the contents of a parent layer to a new layer. All the filters we learned in the previous tutorial can also be applied to the new layer we are creating. For example, you can increase the brightness of a newly created layer using this.filter.brightness(10).

You can also choose to load any other image in the layer and overlay it on the parent, rather than copying the parent or filling the layer with a solid color. Just like the main image, you can also apply different filters to the overlay image.

In the code snippet below, we attach a click event handler to three buttons that will fill the new layer with a solid color, the parent layer, and the overlay image respectively.

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

Mixed Mode in CamanJS

In the previous section we kept the opacity below 100 for any new layers we added to the canvas. This is done because the new layer will completely hide the old layer. When you place one layer on top of another, CamanJS allows you to specify a blending mode that determines the final result after placement. The blending mode is set to normal by default.

This means that any new layer you add to the canvas will make the layers beneath it invisible. There are ten blending modes in this library. These are Normal, Multiplication, Screen, Overlay, Difference, Add, Exclude, softLight, Exclude and Darken.

As I mentioned before, the normal blending mode sets the final color equal to the color of the new layer. multiply The blending mode determines the final color of the pixel by multiplying the individual channels and then dividing the result by 255. Differences between multiply and addition Blend modes work similarly, but they subtract and add channels.

darken Blending mode sets the final color of a pixel equal to the lowest value of each color channel. lighten Blending modes set the final color of a pixel equal to the highest value of each color channel. The exclusion blending mode is somewhat similar to difference, but it sets the contrast to a lower value. In the case of the screen blending mode, the final color is obtained by inverting the colors of each layer, multiplying, and then inverting the result again.

If the bottom color is darker, the overlay blending mode works like multiply; if the bottom color is lighter, it works like screen.

CamanJS also allows you to define your own blending modes if you want colors in different layers to interact differently. We'll cover this in the next tutorial in this series.

Here is the JavaScript code to apply different blending modes on the image:

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

In the above code snippet, we get the hexadecimal color value from the input field. Then apply that color to a new layer. You can write code to apply other blending modes in a similar manner.

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

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 中创建自己的混合模式和滤镜。如果您对本教程有任何疑问，请随时在评论中告诉我。

The above is the detailed content of Develop image editing tools with CamanJS: Explore layers, blending modes, and event handling. For more information, please follow other related articles on the PHP Chinese website!