使用 CamanJS 开发自定义图像编辑器：扩展滤镜选项和混合模式

发布日期： 2023-08-28 阅读量： 作者： ADMIN

使用 camanjs 开发自定义图像编辑器：扩展滤镜选项和混合模式

在我们的 CamanJS 图像编辑器系列的第一个教程中，我们仅使用内置过滤器来编辑图像。这限制了我们一些基本效果，如亮度、对比度和 18 个其他更复杂的滤镜，如 Vintage、Sunrise 等。它们都很容易应用，但我们无法完全控制我们想要的图像的各个像素进行编辑。

在第二个教程中，我们了解了图层和混合模式，这使我们能够更好地控制正在编辑的图像。例如，您可以在画布上添加一个新图层，用颜色或图像填充它，然后将其放置在父图层上并应用混合模式。然而，我们仍然没有创建自己的过滤器，并且我们可以应用的混合模式仅限于 CamanJS 已经提供的模式。

本教程的目的是教您如何创建自己的混合模式和滤镜。我们还将解决库中存在的一些错误，以及在您自己的项目中使用 CamanJS 时如何修补它们。

创建新的混合模式

默认情况下，CamanJS 提供十种混合模式。它们是正常、相乘、屏蔽、叠加、差值、加法、排除、柔光、变亮和变暗。该库还允许您注册自己的混合模式。这样，您就可以控制当前图层和父图层的相应像素如何混合在一起以产生最终结果。

您可以使用 Caman.Blender.register("blend_mode", callback); 创建新的混合模式。此处，blend_mode 是您要用来识别您正在创建的混合模式的名称。回调函数接受两个参数，其中包含当前图层上不同像素和父图层上相应像素的 RGB 值。该函数返回一个对象，其中包含 rgb 通道的最终值。

下面是自定义混合模式的示例，如果父图层中相应像素的通道值超过 128，则该像素的各个通道的值设置为 255。如果该值低于 128，则最终通道值是父通道值减去当前层通道值的结果。该混合模式的名称是 maxrgb。

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

登录后复制

上一篇: 如何改善浏览器端 token 验证性能问题？

下一篇: C++ 函数优化之天书：提升性能的秘诀

使用 CamanJS 开发自定义图像编辑器：扩展滤镜选项和混合模式

随便看看