在我們的 CamanJS 圖像編輯器系列的第一個(gè)教程中，我們僅使用內(nèi)置過濾器來編輯圖像。這限制了我們一些基本效果，如亮度、對(duì)比度和 18 個(gè)其他更復(fù)雜的濾鏡，如 Vintage、Sunrise 等。它們都很容易應(yīng)用，但我們無法完全控制我們想要的圖像的各個(gè)像素進(jìn)行編輯。

在第二個(gè)教程中，我們了解了圖層和混合模式，這使我們能夠更好地控制正在編輯的圖像。例如，您可以在畫布上添加一個(gè)新圖層，用顏色或圖像填充它，然后將其放置在父圖層上并應(yīng)用混合模式。然而，我們?nèi)匀粵]有創(chuàng)建自己的過濾器，并且我們可以應(yīng)用的混合模式僅限于 CamanJS 已經(jīng)提供的模式。

本教程的目的是教您如何創(chuàng)建自己的混合模式和濾鏡。我們還將解決庫中存在的一些錯(cuò)誤，以及在您自己的項(xiàng)目中使用 CamanJS 時(shí)如何修補(bǔ)它們。

創(chuàng)建新的混合模式

默認(rèn)情況下，CamanJS 提供十種混合模式。它們是正常、相乘、屏蔽、疊加、差值、加法、排除、柔光、變亮和變暗。該庫還允許您注冊(cè)自己的混合模式。這樣，您就可以控制當(dāng)前圖層和父圖層的相應(yīng)像素如何混合在一起以產(chǎn)生最終結(jié)果。

您可以使用 Caman.Blender.register("blend_mode", callback); 創(chuàng)建新的混合模式。此處，blend_mode 是您要用來識(shí)別您正在創(chuàng)建的混合模式的名稱?；卣{(diào)函數(shù)接受兩個(gè)參數(shù)，其中包含當(dāng)前圖層上不同像素和父圖層上相應(yīng)像素的 RGB 值。該函數(shù)返回一個(gè)對(duì)象，其中包含 rgb 通道的最終值。

下面是自定義混合模式的示例，如果父圖層中相應(yīng)像素的通道值超過 128，則該像素的各個(gè)通道的值設(shè)置為 255。如果該值低于 128，則最終通道值是父通道值減去當(dāng)前層通道值的結(jié)果。該混合模式的名稱是 maxrgb。

Caman.Blender.register("maxrgb", function(rgbaLayer, rgbaParent) {
    return {
        r: rgbaParent.r > 128 ? 255 : rgbaParent.r - rgbaLayer.r,
        g: rgbaParent.g > 128 ? 255 : rgbaParent.g - rgbaLayer.g,
        b: rgbaParent.b > 128 ? 255: rgbaParent.b - rgbaLayer.b
    };
});

讓我們以類似的方式創(chuàng)建另一個(gè)混合模式。這次，如果父層對(duì)應(yīng)像素的通道值大于128，則最終的通道值將被設(shè)置為0。如果父層的通道值小于128，則最終結(jié)果將是相加特定像素的當(dāng)前圖層和父圖層的通道值。此混合模式已命名為 minrgb。

Caman.Blender.register("minrgb", function(rgbaLayer, rgbaParent) {
    return {
        r: rgbaParent.r < 128 ? rgbaParent.r + rgbaLayer.r : 0,
        g: rgbaParent.g < 128 ? rgbaParent.g + rgbaLayer.r : 0,
        b: rgbaParent.b < 128 ? rgbaParent.r + rgbaLayer.r : 0
    };
});

您應(yīng)該嘗試創(chuàng)建自己的混合模式進(jìn)行練習(xí)。

創(chuàng)建新的基于像素的過濾器

CamanJS 中有兩大類過濾器。您可以一次對(duì)整個(gè)圖像進(jìn)行一個(gè)像素操作，也可以使用卷積核修改圖像。卷積核是一個(gè)矩陣，它根據(jù)某個(gè)像素周圍的像素來確定該像素的顏色。在本節(jié)中，我們將重點(diǎn)關(guān)注基于像素的濾波器。內(nèi)核操作將在下一節(jié)中介紹。

基于像素的濾鏡一次給出一個(gè)像素的 RGB 通道值。該特定像素的最終 RGB 值不受周圍像素的影響。您可以使用 Caman.Filter.register("filter_name", callback); 創(chuàng)建自己的過濾器。您創(chuàng)建的任何過濾器都必須調(diào)用 process() 方法。此方法接受過濾器名稱和回調(diào)函數(shù)作為參數(shù)。

以下代碼片段向您展示如何創(chuàng)建基于像素的過濾器，將圖像變成灰度。這是通過計(jì)算每個(gè)像素的發(fā)光，然后將各個(gè)通道的值設(shè)置為等于計(jì)算的發(fā)光來完成的。

Caman.Filter.register("grayscale", function () {
    this.process("grayscale", function (rgba) {
        var lumin = (0.2126 * rgba.r) + (0.7152 * rgba.g) + (0.0722 * rgba.b);
        rgba.r = lumin;
        rgba.g = lumin;
        rgba.b = lumin;
    });
    return this;
});

您可以以類似的方式創(chuàng)建閾值過濾器。這次，我們將允許用戶通過一個(gè)閾值。如果特定像素的亮度高于用戶提供的限制，則該像素將變成白色。如果特定像素的亮度低于用戶提供的限制，該像素將變黑。

Caman.Filter.register("threshold", function (limit) {
    this.process("threshold", function (rgba) {
        var lumin = (0.2126 * rgba.r) + (0.7152 * rgba.g) + (0.0722 * rgba.b);
        rgba.r = lumin > limit ? 255 : 0;
        rgba.g = lumin > limit ? 255 : 0;
        rgba.b = lumin > limit ? 255 : 0;
    });
    return this;
});

作為練習(xí)，您應(yīng)該嘗試創(chuàng)建自己的基于像素的過濾器，例如，增加所有像素上特定通道的值。

CamanJS 還允許您設(shè)置絕對(duì)和相對(duì)位置像素的顏色，而不是操縱當(dāng)前像素的顏色。不幸的是，這種行為有點(diǎn)錯(cuò)誤，所以我們必須重寫一些方法。如果您查看該庫的源代碼，您會(huì)注意到 getPixel() 和 putPixel() 等方法調(diào)用了 方法<code class="inline">this 上的 和 上的 和 。但是，這些方法不是在原型上定義的，而是在類本身上定義的。

該庫的另一個(gè)問題是 putPixelRelative() 方法在兩個(gè)不同的地方使用變量名稱 nowLoc 而不是 newLoc 。您可以通過在腳本中添加以下代碼來解決這兩個(gè)問題。

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;
};

更正代碼后，您現(xiàn)在應(yīng)該能夠創(chuàng)建依賴于 putPixelRelative() 的過濾器，沒有任何問題。這是我創(chuàng)建的一個(gè)這樣的過濾器。

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

此過濾器將當(dāng)前像素向上兩行和右側(cè)兩列的像素值隨機(jī)設(shè)置為白色。這會(huì)擦除部分圖像。這就是過濾器名稱的由來。

創(chuàng)建新的基于內(nèi)核操作的過濾器

正如我之前提到的，CamanJS 允許您創(chuàng)建自定義濾鏡，其中當(dāng)前像素的顏色由其周圍的像素決定。基本上，這些濾鏡會(huì)遍歷您正在編輯的圖像中的每個(gè)像素。圖像中的一個(gè)像素將被其他八個(gè)像素包圍。圖像中這九個(gè)像素的值乘以卷積矩陣的相應(yīng)條目。然后將所有這些乘積加在一起以獲得像素的最終顏色值。您可以在 GIMP 文檔中更詳細(xì)地了解該過程。

就像基于像素的過濾器一樣，您可以使用 Caman.Filter.register("filter_name", callback); 定義自己的內(nèi)核操作過濾器。唯一的區(qū)別是您現(xiàn)在將在回調(diào)函數(shù)內(nèi)調(diào)用 processKernel()。

這是使用內(nèi)核操作創(chuàng)建浮雕過濾器的示例。

Caman.Filter.register("emboss", function () {
    this.processKernel("emboss", [
        -2, -1, 0,
        -1, 1, 1,
        0, 1, 2
    ]);
});

以下 CodePen 演示將展示我們?cè)诒窘坛讨袆?chuàng)建的所有過濾器的實(shí)際操作。

最終想法

在本系列中，我?guī)缀鹾w了 CamanJS 在基于畫布的圖像編輯方面提供的所有內(nèi)容。您現(xiàn)在應(yīng)該能夠使用所有內(nèi)置濾鏡、創(chuàng)建新圖層、在這些圖層上應(yīng)用混合模式以及定義您自己的混合模式和濾鏡功能。

您還可以瀏覽 CamanJS 網(wǎng)站上的指南，以了解我可能錯(cuò)過的任何內(nèi)容。我還建議您閱讀該庫的源代碼，以了解有關(guān)圖像處理的更多信息。這也將幫助您發(fā)現(xiàn)庫中的任何其他錯(cuò)誤。

以上是使用 CamanJS 開發(fā)自定義圖像編輯器：擴(kuò)展濾鏡選項(xiàng)和混合模式的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！