Développez des outils d'édition d'images avec CamanJS : explorez les calques, les modes de fusion et la gestion des événements

Dans le didacticiel précédent, vous avez appris à utiliser CamanJS pour créer un éditeur d'images capable d'appliquer des filtres de base tels que le contraste, la luminosité et le bruit aux images. CamanJS dispose également d'autres filtres intégrés comme la nostalgie, le sténopé, le lever du soleil, etc. que nous appliquons directement à l'image.

Dans ce didacticiel, nous aborderons certaines des fonctionnalités les plus avancées de la bibliothèque, telles que les calques, les modes de fusion et les événements.

Couches dans CamanJS

Dans ce premier tutoriel, nous n'utilisons qu'un seul calque contenant l'image. Tous les filtres que nous appliquons manipulent uniquement ce calque principal. CamanJS vous permet de créer plusieurs calques afin que vous puissiez éditer des images de manière plus complexe. Vous pouvez créer des calques imbriqués, mais ils seront toujours appliqués à leur calque parent comme une pile.

Chaque fois que vous créez un nouveau calque et l'appliquez à un calque parent, le mode de fusion par défaut utilisé sera la méthode normal。您可以使用 newLayer() qui crée un nouveau calque sur le canevas. Lorsque vous créez un nouveau calque, vous pouvez également transmettre une fonction de rappel, ce qui peut être utile si vous envisagez de manipuler le calque.

Cette fonction peut être utilisée pour de nombreuses tâches, comme contrôler l'opacité d'un nouveau calque à l'aide de la méthode setBlendingMode() 方法设置新图层的混合模式。同样，您可以使用 opacity().

Tout nouveau calque que vous créez peut utiliser fillColor() 方法填充纯色。您还可以使用 copyParent() 方法将父层的内容复制到新层。我们在上一个教程中学到的所有过滤器也可以应用于我们正在创建的新图层。例如，您可以使用 this.filter.brightness(10) pour augmenter la luminosité du calque nouvellement créé.

Vous pouvez également choisir de charger n'importe quelle autre image dans le calque et de la superposer sur le parent, au lieu de copier le parent ou de remplir le calque avec une couleur unie. Tout comme l'image principale, vous pouvez également appliquer différents filtres à l'image de superposition.

Dans l'extrait de code ci-dessous, nous attachons un gestionnaire d'événements de clic à trois boutons qui rempliront respectivement le nouveau calque d'une couleur unie, le calque parent et l'image de superposition.

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

Modes mixtes dans CamanJS

Dans la section précédente, nous avons maintenu l'opacité en dessous de 100 pour tous les nouveaux calques que nous avons ajoutés au canevas. Ceci est fait car le nouveau calque masquera complètement l’ancien calque. Lorsque vous placez un calque sur un autre, CamanJS vous permet de spécifier un mode de fusion qui détermine le résultat final après le placement. Le mode de fusion est réglé sur normal par défaut.

Cela signifie que tout nouveau calque que vous ajoutez au canevas rendra invisibles les calques situés en dessous. Il existe dix modes de fusion dans cette bibliothèque. Ce sont 正常、乘法、屏幕、覆盖、差异、添加、排除、softLight、排除 和暗化.

Comme je l'ai déjà mentionné, normal 混合模式将最终颜色设置为等于新图层的颜色。 multiply 混合模式通过将各个通道相乘，然后将结果除以 255 来确定像素的最终颜色。 multiply 和 addition Le mode de fusion définit la couleur finale égale à la couleur du nouveau calque. Le mode de fusion multiply détermine la couleur finale d'un pixel en multipliant les canaux individuels et en divisant le résultat par 255. Les différences entre les modes de fusion multiply et addition fonctionnent de la même manière, mais ils soustraient et ajoutent des canaux.

darken 混合模式将像素的最终颜色设置为等于各个颜色通道的最低值。 lighten 混合模式将像素的最终颜色设置为等于各个颜色通道的最高值。 exclusion 混合模式与 difference 有点相似，但它将对比度设置为较低的值。在 screen Dans le cas du mode fusion, la couleur finale est obtenue en inversant les couleurs de chaque calque, en multipliant, puis en inversant à nouveau le résultat.

Si la couleur du fond est plus foncée, alors overlay 混合模式的作用类似于 multiply；如果底部颜色较浅，则其作用类似于 screen.

CamanJS vous permet également de définir vos propres modes de fusion si vous souhaitez que les couleurs de différents calques interagissent différemment. Nous aborderons cela dans le prochain didacticiel de cette série.

Voici le code JavaScript pour appliquer différents modes de fusion sur une 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();
    });
});

Dans l'extrait de code ci-dessus, nous obtenons la valeur de couleur hexadécimale du champ de saisie. Appliquez ensuite cette couleur à un nouveau calque. Vous pouvez écrire du code pour appliquer d'autres modes de fusion de la même manière.

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

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!