使用 CamanJS 開發影像編輯工具：探索圖層、混合模式和事件處理-js教程-PHP中文網

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

在上一教學中，您學習如何使用 CamanJS 建立影像編輯器，該編輯器可以對影像套用對比度、亮度和雜訊等基本濾鏡。 CamanJS 還有一些其他內建濾鏡，如懷舊、針孔、日出等，我們直接將其應用到影像上。

在本教程中，我們將介紹該程式庫的一些更進階的功能，例如圖層、混合模式和事件。

CamanJS 中的層

在第一個教學中，我們只使用包含圖像的單一圖層。我們應用的所有過濾器僅操縱該主層。 CamanJS 可讓您建立多個圖層，以便您能夠以更複雜的方式編輯影像。您可以建立巢狀圖層，但它們將始終像堆疊一樣套用到其父圖層。

每當您建立新圖層並將其套用到父圖層時，使用的預設混合模式將為 normal。您可以使用 newLayer() 方法在畫布上建立一個新圖層。當您建立新圖層時，您也可以傳遞回調函數，如果您打算操作圖層，則該函數將很有用。

#此函數可用於許多任務，例如使用 setBlendingMode() 方法設定新圖層的混合模式。同樣，您可以使用 opacity() 方法來控制新圖層的不透明度。

您建立的任何新圖層都可以使用 fillColor() 方法填滿純色。您也可以使用 copyParent() 方法將父層的內容複製到新圖層。我們在上一個教學中學到的所有濾鏡也可以應用於我們正在建立的新圖層。例如，您可以使用 this.filter.brightness(10) 增加新建立圖層的亮度。

您也可以選擇載入圖層中的任何其他影像並將其覆蓋在父級上，而不是複製父級或使用純色填充圖層。就像主影像一樣，您也可以對疊加影像套用不同的濾鏡。

在下面的程式碼片段中，我們將一個點擊事件處理程序附加到三個按鈕，這三個按鈕將分別用純色、父圖層和覆蓋影像填滿新圖層。

$('#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();
    });
});

登入後複製

CamanJS 中的混合模式

在上一節中，我們將新增到畫布的任何新圖層的不透明度保持在 100 以下。這樣做是因為新圖層將完全隱藏舊圖層。當您將一層放置在另一層上時，CamanJS 允許您指定混合模式，該模式決定放置後的最終結果。混合模式預設為 normal 。

這意味著您在畫布上新增的任何新圖層都會使其下面的圖層不可見。該庫共有十種混合模式。這些是正常、乘法、螢幕、覆蓋、差異、新增、 排除、softLight、排除 和暗化。

正如我之前提到的，normal 混合模式將最終顏色設定為等於新圖層的顏色。 multiply 混合模式透過將各個通道相乘，然後將結果除以 255 來確定像素的最終顏色。 multiply 和 addition 的區別混合模式的工作方式類似，但它們會減去和添加通道。

darken 混合模式將像素的最終顏色設定為等於各個顏色通道的最低值。 lighten 混合模式將像素的最終顏色設定為等於各個顏色通道的最高值。 exclusion 混合模式與 difference 有點相似，但它將對比度設定為較低的值。在 screen 混合模式的情況下，最終顏色是透過反轉每層的顏色、相乘，然後再次反轉結果來獲得的。

如果底部顏色較深，則 overlay 混合模式的作用類似於 multiply；如果底部顏色較淺，則其作用類似於 screen。

如果您希望不同圖層中的顏色以不同的方式交互，CamanJS 還允許您定義自己的混合模式。我們將在本系列的下一個教程中介紹這一點。

以下是在映像上套用不同混合模式的 JavaScript 程式碼：

$('#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();
    });
});

登入後複製

在上面的程式碼片段中，我們從輸入欄位取得十六進位顏色值。然後將該顏色套用到新圖層上。您可以編寫程式碼以類似的方式套用其他混合模式。

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

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

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