CamanJS を使用したカスタム画像エディターの開発: 拡張フィルター オプションとブレンド モード

CamanJS 画像エディター シリーズの最初のチュートリアルでは、画像の編集に組み込みフィルターのみを使用します。これにより、明るさ、コントラストなどのいくつかの基本的な効果と、ヴィンテージ、日の出などの他の 18 個のより複雑なフィルターに制限されます。これらはすべて簡単に適用できますが、編集する画像の個々のピクセルを完全に制御することはできません。

この 2 番目のチュートリアルでは、編集中の画像をより詳細に制御できるレイヤーとブレンド モードについて学びました。たとえば、新しいレイヤーをキャンバスに追加し、色または画像で塗りつぶしてから、それを親レイヤー上に配置して、描画モードを適用できます。ただし、まだ独自のフィルターを作成しておらず、適用できるブレンド モードは CamanJS によってすでに提供されているものに限られています。

このチュートリアルの目的は、独自のブレンド モードとフィルターを作成する方法を説明することです。また、ライブラリに存在するいくつかのバグと、独自のプロジェクトで CamanJS を使用するときにそれらにパッチを適用する方法についても説明します。

新しいブレンド モードを作成する

デフォルトでは、CamanJS は 10 個のブレンディング モードを提供します。それらは、標準、乗算、マスク、加算、差分、加算、除外、ソフトライト、明るく、暗くします。このライブラリでは、独自のブレンド モードを登録することもできます。このようにして、現在のレイヤーと親レイヤーの対応するピクセルをどのようにブレンドして最終結果を生成するかを制御できます。

Caman.Blender.register("blend_mode", callback); を使用して、新しいブレンド モードを作成できます。ここで、blend_mode は、作成しているブレンド モードを識別するために使用する名前です。コールバック関数は、現在のレイヤー上の異なるピクセルと親レイヤー上の対応するピクセルの RGB 値を含む 2 つのパラメーターを受け取ります。この関数は、rgb チャネルの最終値を含むオブジェクトを返します。

maxrgb です。 リーリー

minrgb という名前が付けられています。 リーリー

Caman.Filter.register("filter_name", callback); を使用して独自のフィルターを作成できます。作成するフィルターはすべて、process() メソッドを呼び出す必要があります。このメソッドは、フィルター名とコールバック関数をパラメーターとして受け取ります。

リーリー

リーリー

getPixel() や putPixel() などのメソッドが this## の メソッドを呼び出していることがわかります。 ## と <code class="inline"> の # と 。ただし、これらのメソッドはプロトタイプでは定義されず、クラス自体で定義されます。 このライブラリのもう 1 つの問題は、putPixelRelative()

newLoc ではなく変数名 nowLoc を 2 つの異なる場所で使用していることです。次のコードをスクリプトに追加することで、両方の問題を解決できます。

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 网站上的指南，以了解我可能错过的任何内容。我还建议您阅读该库的源代码，以了解有关图像处理的更多信息。这也将帮助您发现库中的任何其他错误。

以上がCamanJS を使用したカスタム画像エディターの開発: 拡張フィルター オプションとブレンド モードの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。