CamanJS を使用して画像編集ツールを開発する: レイヤー、ブレンドモード、イベント処理を探索する-jsチュートリアル-php.cn

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

王林

リリース： 2023-09-04 18:37:05

オリジナル

1240 人が閲覧しました

使用 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 事件使您可以访问块总数、当前正在处理的块以及已完成块的数量等信息。

尝试单击下面演示中的任何按钮，您将在画布下方的区域中看到当前操作图像的进程的名称。