CamanJS を使用して画像編集ツールを開発する: レイヤー、ブレンド モード、イベント処理を探索する

前のチュートリアルでは、CamanJS を使用して、コントラスト、明るさ、ノイズなどの基本的なフィルターを画像に適用できる画像エディターを作成する方法を学習しました。 CamanJS には、ノスタルジア、ピンホール、日の出など、画像に直接適用する他の組み込みフィルターもいくつかあります。

このチュートリアルでは、レイヤー、ブレンド モード、イベントなど、ライブラリのより高度な機能をいくつか紹介します。

CamanJS のレイヤー

この最初のチュートリアルでは、画像を含む 1 つのレイヤーのみを使用します。適用するすべてのフィルターは、このメインレイヤーのみを操作します。 CamanJS を使用すると、複数のレイヤーを作成できるため、より複雑な方法で画像を編集できます。ネストされたレイヤーを作成できますが、それらは常にスタックのように親レイヤーに適用されます。

新しいレイヤーを作成して親レイヤーに適用する場合、使用されるデフォルトのブレンド モードは normal になります。 newLayer() メソッドを使用して、キャンバス上に新しいレイヤーを作成できます。新しいレイヤーを作成するときに、コールバック関数を渡すこともできます。これは、レイヤーを操作する場合に便利です。

この関数は、setBlendingMode() メソッドを使用した新しいレイヤーのブレンディング モードの設定など、多くのタスクに使用できます。同様に、opacity() メソッドを使用して、新しいレイヤーの不透明度を制御できます。

新しく作成したレイヤーは、fillColor() メソッドを使用して単色で塗りつぶすことができます。 copyParent() メソッドを使用して、親レイヤーのコンテンツを新しいレイヤーにコピーすることもできます。前のチュートリアルで学んだすべてのフィルターは、作成中の新しいレイヤーにも適用できます。たとえば、this.filter.brightness(10) を使用して、新しく作成したレイヤーの明るさを増やすことができます。

親をコピーしたりレイヤーを単色で塗りつぶしたりするのではなく、レイヤーに他の画像をロードして親にオーバーレイすることも選択できます。メイン画像と同様に、オーバーレイ画像にもさまざまなフィルターを適用できます。

以下のコード スニペットでは、新しいレイヤーを単色、親レイヤー、オーバーレイ イメージでそれぞれ塗りつぶす 3 つのボタンにクリック イベント ハンドラーをアタッチします。

リーリー

CamanJS の混合モード

前のセクションでは、キャンバスに追加した新しいレイヤーの不透明度を 100 未満に保ちました。これは、新しいレイヤーが古いレイヤーを完全に隠すために行われます。あるレイヤーを別のレイヤーの上に配置する場合、CamanJS を使用すると、配置後の最終結果を決定するブレンド モードを指定できます。ブレンド モードはデフォルトで normal に設定されています。

これは、キャンバスに新しいレイヤーを追加すると、その下のレイヤーが非表示になることを意味します。このライブラリには 10 個のブレンド モードがあります。これらは、Normal、Multiplication、Screen、Overlay、Difference、Add、 Exclude、softLight、Exclude、および Darken。

前に述べたように、normal 描画モードでは、最終的な色が新しいレイヤーの色と同じに設定されます。 multiply ブレンド モードは、個々のチャネルを乗算し、その結果を 255 で除算することによって、ピクセルの最終的な色を決定します。 multiply と addition の違い ブレンド モードは同様に機能しますが、チャネルの減算と加算が行われます。

darken ブレンド モードでは、ピクセルの最終的なカラーが各カラー チャネルの最低値に等しく設定されます。 lighten ブレンド モードでは、ピクセルの最終的な色が各カラー チャネルの最大値に等しく設定されます。 除外 ブレンディング モードは difference に似ていますが、コントラストをより低い値に設定します。 screen ブレンディング モードの場合、最終的な色は、各レイヤーの色を反転して乗算し、その結果を再度反転することによって取得されます。

下の色が暗い場合、overlay ブレンディング モードは multiply のように機能し、下の色が明るい場合は screen のように機能します。

CamanJS では、異なるレイヤーの色を異なる方法で相互作用させたい場合に、独自のブレンド モードを定義することもできます。これについては、このシリーズの次のチュートリアルで説明します。

画像にさまざまなブレンド モードを適用するための JavaScript コードを次に示します:

リーリー

上記のコード スニペットでは、入力フィールドから 16 進数のカラー値を取得します。次に、その色を新しいレイヤーに適用します。同様の方法で、他のブレンド モードを適用するコードを作成できます。

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

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

以上がCamanJS を使用して画像編集ツールを開発する: レイヤー、ブレンド モード、イベント処理を探索するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。