Créez un filtre personnalisé et un éditeur d'images en mode fusion avec CamanJS

Dans ce premier tutoriel de notre série d'éditeurs d'images CamanJS, nous éditons des images en utilisant uniquement les filtres intégrés. Cela nous limite à quelques effets de base comme la luminosité, le contraste et 18 autres filtres plus complexes (avec des noms comme Vintage, Sunrise, etc.). Ils sont tous faciles à appliquer, mais nous n'avons pas un contrôle total sur les pixels individuels de l'image que nous souhaitons modifier.

Dans ce deuxième tutoriel, nous avons découvert les calques et les modes de fusion, qui nous donnent plus de contrôle sur l'image que nous modifions. Par exemple, vous pouvez ajouter un nouveau calque au canevas, le remplir d'une couleur ou d'une image, puis le placer sur le calque parent et appliquer un mode de fusion. Cependant, nous n'avons toujours pas créé notre propre filtre et les modes de fusion que nous pouvons appliquer sont limités à ceux déjà fournis par CamanJS.

Le but de ce tutoriel est de vous apprendre à créer vos propres modes de fusion et filtres. Nous aborderons également certains bugs présents dans la bibliothèque et comment les corriger lors de l'utilisation de CamanJS dans vos propres projets.

Créez de nouveaux modes de fusion

Par défaut, CamanJS propose dix modes de fusion. Ils sont Normal, Multiplier, Masquer, Ajouter, Différence, Ajouter, Exclure, Lumière douce, Éclaircir et Assombrir. La bibliothèque vous permet également d'enregistrer vos propres modes de fusion. De cette façon, vous pouvez contrôler la manière dont les pixels correspondants du calque actuel et du calque parent sont fusionnés pour produire le résultat final.

Vous pouvez utiliser Caman.Blender.register("blend_mode", callback); 创建新的混合模式。此处，blend_mode 是您要用来识别您正在创建的混合模式的名称。回调函数接受两个参数，其中包含当前图层上不同像素和父图层上相应像素的 RGB 值。该函数返回一个对象，其中包含 rgb la valeur finale du canal.

Voici un exemple de mode de fusion personnalisé qui définit la valeur de chaque canal du pixel à 255 si la valeur du canal du pixel correspondant dans le calque parent dépasse 128. Si la valeur est inférieure à 128, la valeur finale du canal est la valeur du canal parent moins la valeur du canal de couche actuel. Le nom de ce mode de fusion est maxrgb.

Caman.Blender.register("maxrgb", function(rgbaLayer, rgbaParent) {
    return {
        r: rgbaParent.r > 128 ? 255 : rgbaParent.r - rgbaLayer.r,
        g: rgbaParent.g > 128 ? 255 : rgbaParent.g - rgbaLayer.g,
        b: rgbaParent.b > 128 ? 255: rgbaParent.b - rgbaLayer.b
    };
});

Créons un autre mode de fusion de la même manière. Cette fois, si la valeur de canal du pixel correspondant dans le calque parent est supérieure à 128, la valeur de canal finale sera fixée à 0. Si la valeur de canal du calque parent est inférieure à 128, le résultat final sera l'addition des valeurs de canal du calque actuel et du calque parent pour le pixel spécifique. Ce mode de fusion a été nommé minrgb.

Caman.Blender.register("minrgb", function(rgbaLayer, rgbaParent) {
    return {
        r: rgbaParent.r < 128 ? rgbaParent.r + rgbaLayer.r : 0,
        g: rgbaParent.g < 128 ? rgbaParent.g + rgbaLayer.r : 0,
        b: rgbaParent.b < 128 ? rgbaParent.r + rgbaLayer.r : 0
    };
});

Vous devriez essayer de créer vos propres modes de fusion pour vous entraîner.

Créez de nouveaux filtres basés sur les pixels

Il existe deux principaux types de filtres dans CamanJS. Vous pouvez opérer sur l'image entière, un pixel à la fois, ou vous pouvez utiliser des noyaux de convolution pour modifier l'image. Le noyau de convolution est une matrice qui détermine la couleur d'un pixel en fonction des pixels qui l'entourent. Dans cette section, nous nous concentrerons sur les filtres basés sur les pixels. Les opérations du noyau sont couvertes dans la section suivante.

Les filtres basés sur les pixels donnent aux valeurs du canal RVB un pixel à la fois. La valeur RVB finale de ce pixel particulier n'est pas affectée par les pixels environnants. Vous pouvez utiliser la méthode Caman.Filter.register("filter_name", callback); 创建自己的过滤器。您创建的任何过滤器都必须调用 process(). Cette méthode accepte le nom du filtre et la fonction de rappel comme paramètres.

L'extrait de code suivant vous montre comment créer un filtre basé sur les pixels qui transforme une image en niveaux de gris. Cela se fait en calculant la luminescence de chaque pixel, puis en définissant les valeurs des canaux individuels égales à la luminescence calculée.

Caman.Filter.register("grayscale", function () {
    this.process("grayscale", function (rgba) {
        var lumin = (0.2126 * rgba.r) + (0.7152 * rgba.g) + (0.0722 * rgba.b);
        rgba.r = lumin;
        rgba.g = lumin;
        rgba.b = lumin;
    });
    return this;
});

Vous pouvez créer des filtres de seuil de la même manière. Cette fois, nous autoriserons les utilisateurs à franchir un seuil. Si la luminosité d'un pixel spécifique est supérieure à la limite fournie par l'utilisateur, le pixel deviendra blanc. Si la luminosité d'un pixel spécifique tombe en dessous d'une limite fournie par l'utilisateur, ce pixel deviendra noir.

Caman.Filter.register("threshold", function (limit) {
    this.process("threshold", function (rgba) {
        var lumin = (0.2126 * rgba.r) + (0.7152 * rgba.g) + (0.0722 * rgba.b);
        rgba.r = lumin > limit ? 255 : 0;
        rgba.g = lumin > limit ? 255 : 0;
        rgba.b = lumin > limit ? 255 : 0;
    });
    return this;
});

À titre d'exercice, vous devriez essayer de créer votre propre filtre basé sur les pixels, par exemple en augmentant la valeur d'un canal spécifique sur tous les pixels.

CamanJS vous permet également de définir la couleur des pixels positionnés de manière absolue et relative au lieu de manipuler la couleur du pixel actuel. Malheureusement, ce comportement est un peu bogué, nous devons donc remplacer certaines méthodes. Si vous regardez le code source de cette bibliothèque, vous le remarquerez getPixel() 和 putPixel() 等方法调用了 方法<code class="inline">this 上的 和 上的 和 . Cependant, ces méthodes ne sont pas définies sur le prototype, mais sur la classe elle-même.

Un autre problème avec cette bibliothèque est putPixelRelative() 方法在两个不同的地方使用变量名称 nowLoc 而不是 newLoc. Vous pouvez résoudre les deux problèmes en ajoutant le code suivant à votre script.

Caman.Pixel.prototype.coordinatesToLocation = Caman.Pixel.coordinatesToLocation
Caman.Pixel.prototype.locationToCoordinates = Caman.Pixel.locationToCoordinates

Caman.Pixel.prototype.putPixelRelative = function (horiz, vert, rgba) {
    var newLoc;
    if (this.c == null) {
        throw "Requires a CamanJS context";
    }
    newLoc = this.loc + (this.c.dimensions.width * 4 * (vert * -1)) + (4 * horiz);
    if (newLoc > this.c.pixelData.length || newLoc < 0) {
        return;
    }
    this.c.pixelData[newLoc] = rgba.r;
    this.c.pixelData[newLoc + 1] = rgba.g;
    this.c.pixelData[newLoc + 2] = rgba.b;
    this.c.pixelData[newLoc + 3] = rgba.a;
    return true;
};

更正代码后，您现在应该能够创建依赖于 putPixelRelative() 的过滤器，没有任何问题。这是我创建的一个这样的过滤器。

Caman.Filter.register("erased", function (adjust) {
    this.process("erased", function (rgba) {
        if(Math.random() < 0.25) {
        rgba.putPixelRelative(2, 2, {
            r: 255,
            g: 255,
            b: 255,
            a: 255
        });
        }
    });
    return this;
});

此过滤器将当前像素向上两行和右侧两列的像素值随机设置为白色。这会擦除部分图像。这就是过滤器名称的由来。

创建新的基于内核操作的过滤器

正如我之前提到的，CamanJS 允许您创建自定义滤镜，其中当前像素的颜色由其周围的像素决定。基本上，这些滤镜会遍历您正在编辑的图像中的每个像素。图像中的一个像素将被其他八个像素包围。图像中这九个像素的值乘以卷积矩阵的相应条目。然后将所有这些乘积加在一起以获得像素的最终颜色值。您可以在 GIMP 文档中更详细地了解该过程。

就像基于像素的过滤器一样，您可以使用 Caman.Filter.register("filter_name", callback); 定义自己的内核操作过滤器。唯一的区别是您现在将在回调函数内调用 processKernel()。

这是使用内核操作创建浮雕过滤器的示例。

Caman.Filter.register("emboss", function () {
    this.processKernel("emboss", [
        -2, -1, 0,
        -1, 1, 1,
        0, 1, 2
    ]);
});

以下 CodePen 演示将展示我们在本教程中创建的所有过滤器的实际操作。

最终想法

在本系列中，我几乎涵盖了 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!