CamanJS를 사용하여 이미지 편집 도구 개발: 레이어 탐색, 혼합 모드 및 이벤트 처리

이전 튜토리얼에서는 CamanJS를 사용하여 대비, 밝기, 노이즈 등의 기본 필터를 이미지에 적용할 수 있는 이미지 편집기를 만드는 방법을 배웠습니다. CamanJS에는 향수, 핀홀, 일출 등과 같은 다른 내장 필터도 있어 이미지에 직접 적용할 수 있습니다.

이 튜토리얼에서는 레이어, 블렌드 모드, 이벤트 등 라이브러리의 고급 기능 중 일부를 다룹니다.

CamanJS의 레이어

이 첫 번째 튜토리얼에서는 이미지가 포함된 단일 레이어만 사용합니다. 우리가 적용하는 모든 필터는 이 기본 레이어만 조작합니다. CamanJS를 사용하면 여러 레이어를 생성하여 보다 복잡한 방식으로 이미지를 편집할 수 있습니다. 중첩된 레이어를 만들 수 있지만 항상 스택처럼 상위 레이어에 적용됩니다.

새 레이어를 만들어 상위 레이어에 적용할 때마다 사용되는 기본 혼합 모드는 캔버스에 새 레이어를 만드는 normal。您可以使用 newLayer() 방법이 됩니다. 새 레이어를 생성할 때 콜백 함수를 전달할 수도 있는데, 이는 레이어를 조작하려는 경우 유용할 수 있습니다.

이 기능은 setBlendingMode() 方法设置新图层的混合模式。同样，您可以使用 opacity() 메서드를 사용하여 새 레이어의 불투명도를 제어하는 ​​등 다양한 작업에 사용할 수 있습니다.

새 레이어를 만들면 fillColor() 方法填充纯色。您还可以使用 copyParent() 方法将父层的内容复制到新层。我们在上一个教程中学到的所有过滤器也可以应用于我们正在创建的新图层。例如，您可以使用 this.filter.brightness(10)을 사용하여 새로 만든 레이어의 밝기를 높일 수 있습니다.

상위 이미지를 복사하거나 레이어를 단색으로 채우는 대신 레이어에 다른 이미지를 로드하여 상위 이미지에 오버레이하도록 선택할 수도 있습니다. 기본 이미지와 마찬가지로 오버레이 이미지에도 다양한 필터를 적용할 수 있습니다.

아래 코드 조각에서는 새 레이어를 단색, 상위 레이어 및 오버레이 이미지로 각각 채우는 세 개의 버튼에 클릭 이벤트 핸들러를 연결합니다.

CamanJS의 혼합 모드

이전 섹션에서는 캔버스에 추가한 새 레이어의 불투명도를 100 미만으로 유지했습니다. 이는 새 레이어가 이전 레이어를 완전히 숨기기 때문에 수행됩니다. 한 레이어를 다른 레이어 위에 배치할 때 CamanJS를 사용하면 배치 후 최종 결과를 결정하는 혼합 모드를 지정할 수 있습니다. 블렌딩 모드는 기본적으로 normal로 설정되어 있습니다.

즉, 캔버스에 새 레이어를 추가하면 그 아래 레이어가 보이지 않게 됩니다. 이 라이브러리에는 10가지 혼합 모드가 있습니다. 正常、乘法、屏幕、覆盖、差异、添加、排除、softLight、排除 和暗化 입니다.

앞서 언급했듯이 normal 混合模式将最终颜色设置为等于新图层的颜色。 multiply 混合模式通过将各个通道相乘，然后将结果除以 255 来确定像素的最终颜色。 multiply 和 addition 블렌딩 모드는 최종 색상을 새 레이어의 색상과 동일하게 설정합니다. 곱하기 혼합 모드는 개별 채널을 곱하고 그 결과를 255로 나누어 픽셀의 최종 색상을 결정합니다. 곱하기와 덧셈 혼합 모드의 차이점은 비슷하게 작동하지만 채널을 빼고 더합니다.

darken 混合模式将像素的最终颜色设置为等于各个颜色通道的最低值。 lighten 混合模式将像素的最终颜色设置为等于各个颜色通道的最高值。 exclusion 混合模式与 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 事件使您可以访问块总数、当前正在处理的块以及已完成块的数量等信息。

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

最终想法

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

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

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

위 내용은 CamanJS를 사용하여 이미지 편집 도구 개발: 레이어 탐색, 혼합 모드 및 이벤트 처리의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!