Entwickeln Sie Bildbearbeitungswerkzeuge mit CamanJS: Entdecken Sie Ebenen, Mischmodi und Ereignisbehandlung-js-Tutorial-php.cn

使用 CamanJS 开发图像编辑工具：探索图层、混合模式和事件处理

Im vorherigen Tutorial haben Sie gelernt, wie Sie mit CamanJS einen Bildeditor erstellen, der grundlegende Filter wie Kontrast, Helligkeit und Rauschen auf Bilder anwenden kann. CamanJS verfügt auch über einige andere integrierte Filter wie Nostalgie, Lochblende, Sonnenaufgang usw., die wir direkt auf das Bild anwenden.

In diesem Tutorial behandeln wir einige der erweiterten Funktionen der Bibliothek, wie Ebenen, Mischmodi und Ereignisse.

Ebenen in CamanJS

In diesem ersten Tutorial verwenden wir nur eine einzelne Ebene, die das Bild enthält. Alle von uns angewendeten Filter manipulieren nur diese Hauptebene. Mit CamanJS können Sie mehrere Ebenen erstellen, sodass Sie Bilder auf komplexere Weise bearbeiten können. Sie können verschachtelte Ebenen erstellen, diese werden jedoch immer wie ein Stapel auf die übergeordnete Ebene angewendet.

Immer wenn Sie eine neue Ebene erstellen und auf eine übergeordnete Ebene anwenden, wird standardmäßig die normal。您可以使用 newLayer()-Methode verwendet, mit der eine neue Ebene auf der Leinwand erstellt wird. Wenn Sie eine neue Ebene erstellen, können Sie auch eine Rückruffunktion übergeben, was nützlich sein kann, wenn Sie die Ebene bearbeiten möchten.

Diese Funktion kann für viele Aufgaben verwendet werden, beispielsweise zum Steuern der Deckkraft einer neuen Ebene mit der setBlendingMode() 方法设置新图层的混合模式。同样，您可以使用 opacity()-Methode.

Jede neue Ebene, die Sie erstellen, kann fillColor() 方法填充纯色。您还可以使用 copyParent() 方法将父层的内容复制到新层。我们在上一个教程中学到的所有过滤器也可以应用于我们正在创建的新图层。例如，您可以使用 this.filter.brightness(10) verwenden, um die Helligkeit der neu erstellten Ebene zu erhöhen.

Sie können auch jedes andere Bild in die Ebene laden und es über die übergeordnete Ebene legen, anstatt die übergeordnete Ebene zu kopieren oder die Ebene mit einer Volltonfarbe zu füllen. Genau wie beim Hauptbild können Sie auch beim Overlay-Bild verschiedene Filter anwenden.

Im folgenden Codeausschnitt fügen wir drei Schaltflächen einen Click-Event-Handler hinzu, der die neue Ebene, die übergeordnete Ebene bzw. das Overlay-Bild mit einer Volltonfarbe füllt.

$('#orange-btn').on('click', function (e) {
    Caman("#canvas", function () {
        this.newLayer(function () {
            this.opacity(50);
            this.fillColor('#ff9900');
        });
        this.render();
    });
});

$('#parent-btn').on('click', function (e) {
    Caman("#canvas", function () {
        this.newLayer(function () {
            this.opacity(50);
            this.copyParent();
            this.filter.brightness(20);
        });
        this.render();
    });
});

$('#overlay-btn').on('click', function (e) {
    var oImg = new Image();
    oImg.src = "trees.png";
    
    Caman("#canvas", function () {
        this.newLayer(function () {
            this.opacity(50);
            this.overlayImage(oImg);
            this.filter.brightness(20);
        });
        this.render();
    });
});

Nach dem Login kopieren

Gemischte Modi in CamanJS

Im vorherigen Abschnitt haben wir die Deckkraft für alle neuen Ebenen, die wir der Leinwand hinzugefügt haben, unter 100 gehalten. Dies geschieht, weil die neue Ebene die alte Ebene vollständig verdeckt. Wenn Sie eine Ebene über einer anderen platzieren, können Sie mit CamanJS einen Mischmodus festlegen, der das Endergebnis nach der Platzierung bestimmt. Der Mischmodus ist standardmäßig auf normal eingestellt.

Das bedeutet, dass jede neue Ebene, die Sie der Leinwand hinzufügen, die darunter liegenden Ebenen unsichtbar macht. In dieser Bibliothek gibt es zehn Mischmodi. Das sind 正常、乘法、屏幕、覆盖、差异、添加、排除、softLight、排除 和暗化.

Wie ich bereits erwähnt habe: normal 混合模式将最终颜色设置为等于新图层的颜色。 multiply 混合模式通过将各个通道相乘，然后将结果除以 255 来确定像素的最终颜色。 multiply 和 addition Der Mischmodus stellt die endgültige Farbe auf die Farbe der neuen Ebene ein. Der Mischmodus multiplizieren bestimmt die endgültige Farbe eines Pixels, indem er die einzelnen Kanäle multipliziert und das Ergebnis durch 255 dividiert. Unterschiede zwischen den Mischmodi multiply und addition funktionieren ähnlich, aber sie subtrahieren und addieren Kanäle.

darken 混合模式将像素的最终颜色设置为等于各个颜色通道的最低值。 lighten 混合模式将像素的最终颜色设置为等于各个颜色通道的最高值。 exclusion 混合模式与 difference 有点相似，但它将对比度设置为较低的值。在 screen Im Mischmodus erhält man die endgültige Farbe, indem man die Farben jeder Ebene invertiert, multipliziert und das Ergebnis dann erneut invertiert.

Wenn die untere Farbe dunkler ist, dann overlay 混合模式的作用类似于 multiply；如果底部颜色较浅，则其作用类似于 screen.

CamanJS ermöglicht Ihnen auch die Definition eigener Mischmodi, wenn Sie möchten, dass Farben in verschiedenen Ebenen unterschiedlich interagieren. Wir werden dies im nächsten Tutorial dieser Serie behandeln.

Hier ist der JavaScript-Code zum Anwenden verschiedener Mischmodi auf ein Bild:

$('#multiply-btn').on('click', function (e) {
    hexColor = $("#hex-color").val();
    Caman("#canvas", function () {
        this.revert(false);
        this.newLayer(function () {
            this.fillColor(hexColor);
            this.setBlendingMode('multiply');
        });
        this.render();
    });
});

$('#screen-btn').on('click', function (e) {
    hexColor = $("#hex-color").val();
    Caman("#canvas", function () {
        this.revert(false);
        this.newLayer(function () {
            this.fillColor(hexColor);
            this.setBlendingMode('screen');
        });
        this.render();
    });
});

Nach dem Login kopieren

Im obigen Codeausschnitt erhalten wir den Hex-Farbwert aus dem Eingabefeld. Tragen Sie diese Farbe dann auf eine neue Ebene auf. Sie können Code schreiben, um andere Mischmodi auf ähnliche Weise anzuwenden.

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

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!");
});

Nach dem Login kopieren

通过 processStart 和 processFinish 事件，您可以访问当前在图像上运行的进程的名称。另一方面，blockStarted 和 blockFinished 事件使您可以访问块总数、当前正在处理的块以及已完成块的数量等信息。

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

最终想法

本系列的第一个教程向您展示了如何使用 CamanJS 库中的内置滤镜创建基本图像编辑器。本教程向您展示了如何处理多个图层以及如何对每个图层单独应用不同的滤镜和混合模式。

由于大图像的图像编辑过程可能需要一段时间，因此我们还学习了如何向用户表明图像编辑器实际上正在处理图像而不是闲置。

在本系列的下一个也是最后一个教程中，您将学习如何在 CamanJS 中创建自己的混合模式和滤镜。如果您对本教程有任何疑问，请随时在评论中告诉我。

Das obige ist der detaillierte Inhalt vonEntwickeln Sie Bildbearbeitungswerkzeuge mit CamanJS: Entdecken Sie Ebenen, Mischmodi und Ereignisbehandlung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!