CamanJS를 사용하여 사용자 정의 필터 및 블렌드 모드 이미지 편집기 구축-JS 튜토리얼-php.cn

使用 CamanJS 构建自定义滤镜和混合模式图像编辑器

CamanJS 이미지 편집기 시리즈의 첫 번째 튜토리얼에서는 내장된 필터만 사용하여 이미지를 편집합니다. 이는 밝기, 대비 및 18개의 기타 복잡한 필터(빈티지, 일출 등과 같은 이름 포함)와 같은 일부 기본 효과로 제한됩니다. 모두 적용하기 쉽지만 편집하려는 이미지의 개별 픽셀을 완전히 제어할 수는 없습니다.

이 두 번째 튜토리얼에서는 편집 중인 이미지를 더 효과적으로 제어할 수 있는 레이어와 혼합 모드에 대해 배웠습니다. 예를 들어 캔버스에 새 레이어를 추가하고 색상이나 이미지로 채운 다음 상위 레이어에 배치하고 혼합 모드를 적용할 수 있습니다. 그러나 아직 자체 필터를 만들지 않았으며 적용할 수 있는 블렌딩 모드는 CamanJS에서 이미 제공하는 모드로 제한됩니다.

이 튜토리얼의 목적은 자신만의 혼합 모드와 필터를 만드는 방법을 가르치는 것입니다. 또한 라이브러리에 있는 몇 가지 버그와 자신의 프로젝트에서 CamanJS를 사용할 때 이를 패치하는 방법을 다룰 것입니다.

새로운 혼합 모드 만들기

기본적으로 CamanJS는 10가지 블렌딩 모드를 제공합니다. Normal, Multiply, Mask, Add, Difference, Add, Exclude, Soft Light, Lighten 및 Darken이 있습니다. 라이브러리를 사용하면 자신만의 블렌딩 모드를 등록할 수도 있습니다. 이런 방식으로 현재 레이어와 상위 레이어의 해당 픽셀을 혼합하여 최종 결과를 생성하는 방법을 제어할 수 있습니다.

채널의 최종 값을 Caman.Blender.register("blend_mode", callback); 创建新的混合模式。此处，blend_mode 是您要用来识别您正在创建的混合模式的名称。回调函数接受两个参数，其中包含当前图层上不同像素和父图层上相应像素的 RGB 值。该函数返回一个对象，其中包含 rgb 사용할 수 있습니다.

다음은 상위 레이어의 해당 픽셀 채널 값이 128을 초과하는 경우 픽셀의 각 채널 값을 255로 설정하는 사용자 정의 블렌드 모드의 예입니다. 값이 128보다 작은 경우 최종 채널 값은 상위 채널 값에서 현재 레이어 채널 값을 뺀 값입니다. 이 블렌딩 모드의 이름은 maxrgb 입니다.

으아악

비슷한 방식으로 또 다른 블렌드 모드를 만들어 보겠습니다. 이번에는 상위 레이어의 해당 픽셀의 채널 값이 128보다 크면 최종 채널 값은 0으로 설정됩니다. 상위 레이어의 채널 값이 128보다 작은 경우 최종 결과는 특정 픽셀에 대해 현재 레이어와 상위 레이어의 채널 값을 더한 결과가 됩니다. 이 혼합 모드의 이름은 minrgb입니다.

으아악

자신만의 블렌드 모드를 만들어서 연습해 보세요.

새로운 픽셀 기반 필터 만들기

CamanJS에는 크게 두 가지 유형의 필터가 있습니다. 한 번에 한 픽셀씩 전체 이미지에 대해 작업을 수행하거나 컨볼루션 커널을 사용하여 이미지를 수정할 수 있습니다. 컨볼루션 커널은 주변 픽셀을 기반으로 픽셀의 색상을 결정하는 행렬입니다. 이 섹션에서는 픽셀 기반 필터에 중점을 둡니다. 커널 작업은 다음 섹션에서 다룹니다.

픽셀 기반 필터는 RGB 채널 값을 한 번에 한 픽셀씩 제공합니다. 특정 픽셀의 최종 RGB 값은 주변 픽셀의 영향을 받지 않습니다. Caman.Filter.register("filter_name", callback); 创建自己的过滤器。您创建的任何过滤器都必须调用 process() 방법을 사용할 수 있습니다. 이 메소드는 필터 이름과 콜백 함수를 매개변수로 받아들입니다.

다음 코드 조각은 이미지를 회색조로 바꾸는 픽셀 기반 필터를 만드는 방법을 보여줍니다. 이는 각 픽셀의 휘도를 계산한 다음 개별 채널의 값을 계산된 휘도와 동일하게 설정하여 수행됩니다.

으아악

비슷한 방법으로 임계값 필터를 만들 수 있습니다. 이번에는 사용자가 기준점을 통과하도록 허용하겠습니다. 특정 픽셀의 밝기가 사용자가 제공한 한계보다 높으면 해당 픽셀은 흰색이 됩니다. 특정 픽셀의 밝기가 사용자가 제공한 한도 아래로 떨어지면 해당 픽셀은 검게 변합니다.

으아악

연습으로, 예를 들어 모든 픽셀에서 특정 채널의 값을 높이는 등 자신만의 픽셀 기반 필터를 만들어 보세요.

CamanJS를 사용하면 현재 픽셀의 색상을 조작하는 대신 절대 및 상대적으로 위치된 픽셀의 색상을 설정할 수 있습니다. 불행하게도 이 동작은 약간 버그가 있어서 일부 메서드를 재정의해야 합니다. 이 라이브러리의 소스 코드를 보면 getPixel() 和 putPixel() 等方法调用了 方法<code class="inline">this 上的和上的和 를 알 수 있습니다. 그러나 이러한 메서드는 프로토타입이 아니라 클래스 자체에 정의됩니다.

이 라이브러리의 또 다른 문제는 putPixelRelative() 方法在两个不同的地方使用变量名称 nowLoc 而不是 newLoc입니다. 스크립트에 다음 코드를 추가하면 두 문제를 모두 해결할 수 있습니다.

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

로그인 후 복사

更正代码后，您现在应该能够创建依赖于 putPixelRelative() 的过滤器，没有任何问题。这是我创建的一个这样的过滤器。

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

로그인 후 복사

此过滤器将当前像素向上两行和右侧两列的像素值随机设置为白色。这会擦除部分图像。这就是过滤器名称的由来。

创建新的基于内核操作的过滤器

正如我之前提到的，CamanJS 允许您创建自定义滤镜，其中当前像素的颜色由其周围的像素决定。基本上，这些滤镜会遍历您正在编辑的图像中的每个像素。图像中的一个像素将被其他八个像素包围。图像中这九个像素的值乘以卷积矩阵的相应条目。然后将所有这些乘积加在一起以获得像素的最终颜色值。您可以在 GIMP 文档中更详细地了解该过程。

就像基于像素的过滤器一样，您可以使用 Caman.Filter.register("filter_name", callback); 定义自己的内核操作过滤器。唯一的区别是您现在将在回调函数内调用 processKernel()。

这是使用内核操作创建浮雕过滤器的示例。

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

로그인 후 복사

以下 CodePen 演示将展示我们在本教程中创建的所有过滤器的实际操作。

最终想法

在本系列中，我几乎涵盖了 CamanJS 在基于画布的图像编辑方面提供的所有内容。您现在应该能够使用所有内置滤镜、创建新图层、在这些图层上应用混合模式以及定义您自己的混合模式和滤镜功能。

您还可以浏览 CamanJS 网站上的指南，以了解我可能错过的任何内容。我还建议您阅读该库的源代码，以了解有关图像处理的更多信息。这也将帮助您发现库中的任何其他错误。

위 내용은 CamanJS를 사용하여 사용자 정의 필터 및 블렌드 모드 이미지 편집기 구축의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!