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

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

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

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

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

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

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

次は、親レイヤー内の対応するピクセルのチャネル値が 128 を超える場合に、ピクセルの各チャネルの値を 255 に設定するカスタム ブレンド モードの例です。値が 128 より小さい場合、最終的なチャンネル値は、親チャンネル値から現在のレイヤー チャンネル値を引いた値になります。このブレンド モードの名前は

maxrgb です。 リーリー

同様の方法で別のブレンド モードを作成しましょう。今回は、親レイヤー内の対応するピクセルのチャネル値が 128 より大きい場合、最終的なチャネル値は 0 に設定されます。親レイヤーのチャンネル値が 128 未満の場合、最終結果は、現在のレイヤーと特定のピクセルの親レイヤーのチャンネル値を加算したものになります。このブレンド モードは

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

練習のために独自のブレンド モードを作成してみてください。

新しいピクセルベースのフィルターを作成する

CamanJS には 2 つの主要なタイプのフィルターがあります。画像全体を一度に 1 ピクセルずつ操作することも、コンボリューション カーネルを使用して画像を変更することもできます。コンボリューション カーネルは、周囲のピクセルに基づいてピクセルの色を決定するマトリックスです。このセクションでは、ピクセルベースのフィルターに焦点を当てます。カーネルの操作については次のセクションで説明します。

ピクセルベースのフィルターは、R​​GB チャンネル値を一度に 1 ピクセルずつ与えます。その特定のピクセルの最終的な RGB 値は、周囲のピクセルの影響を受けません。

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

次のコード スニペットは、画像をグレースケールに変換するピクセルベースのフィルターを作成する方法を示しています。これは、各ピクセルのルミネセンスを計算し、計算されたルミネセンスに等しい個々のチャネルの値を設定することによって行われます。

リーリー

同様の方法でしきい値フィルターを作成できます。今回は、ユーザーがしきい値を通過できるようにします。特定のピクセルの明るさがユーザー指定の制限よりも高い場合、ピクセルは白になります。特定のピクセルの明るさがユーザー指定の制限を下回ると、そのピクセルは黒になります。

リーリー

演習として、独自のピクセルベースのフィルターを作成してみるとよいでしょう。たとえば、すべてのピクセルで特定のチャネルの値を増やします。

CamanJS では、現在のピクセルの色を操作するのではなく、絶対的および相対的に配置されたピクセルの色を設定することもできます。残念ながら、この動作には少しバグがあるため、いくつかのメソッドをオーバーライドする必要があります。ライブラリのソース コードを見ると、

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 サイトの他の関連記事を参照してください。