使用CamanJS处理网页图像的技巧

时间：2021-09-08 来源：互联网编辑：宝哥软件园浏览：次

你可能想知道为什么我们要使用这样的JavaScript库，因为CSS已经有现成的函数来支持基本的图像操作。

嗯，除了有浏览器支持，使用CamanJS还有很多优点。它为我们操作图像提供了更多的过滤器和选项。您可以在图像中创建高级滤镜，然后控制其中的每个像素。您可以使用其内置的混合模式和图层系统。而且它还允许你跨域操作图像，并且可以保存操作产生的图像。

现在，让我们开始探索CamanJS提供的功能！

介绍必要的文件

要开始使用CamanJS，你需要简单地将这个库引入你的页面。除了核心功能，我引用的最小化CDN版本中的所有插件都被合并到一个文件：中

脚本src=' http :https://cdn js . cloud flare.com/Ajax/libs/CamanJS/4 . 1 . 2/caman . full . min . js '/脚本从版本3到版本4，CamanJS函数的语法发生了一点变化。因此，在学习本教程时，请确保您介绍的版本在4以上。

通过HTML属性进行图像操作

CamanJS可以通过使用data-caman属性来操作图像。下面的代码向您展示了如何对图片应用亮度为“10”的滤镜和对比度为“30”的滤镜：

Img data-caman='亮度(10)对比度(30)' src=' http : your image . jpg ' alt=' caman js JAVAScript库网页图像处理'

可以与类似语法一起使用的其他18个过滤器也打包到这个库中。

例如：

img data-caman=' love()hazydays()' src=' http : your image . jpg ' alt=' caman js JAVAScript库网页图像处理'

通过JavaScript操作图像

您也可以选择通过编写几行JavaScript来操作图像。JavaScript操作的结果和data-caman属性的结果是一样的。

Caman('#your-image-id '，function(){ this . brightness(40)；对比(-10)；this . Sincity()；this . render()；});

在图像编辑器中实现控件

事实上，过滤器可以用来触发按钮点击，无需太多调整。一些像vintage()，lomo()和sinCity()这样的过滤器不需要参数。对比度()和噪声()等其他过滤器需要一个整数值作为参数。该值决定了过滤器的强度。

复杂的滤镜(如tiltShift()、posterize()和晕影()需要多个参数。下面的代码块演示了如果使用三个按钮来执行三个筛选操作。其他过滤器也可以这样编码。

以下是HTML:

canvas id=' canvasbutton '/canvasbutton id=' vintagebtn ' vintagebtn/button button id=' noise BTN ' noise/button button id=' tilt Shift BTN ' tilt Shift/button

以下是对按钮点击应用过滤器的JavaScript/jQuery代码：

实施滑块控制

亮度、对比度和色调等滤镜需要更精确地控制值，使用范围值输入滑块可以很好地工作。您将看到滑块控件的实现与按钮控件仅略有不同。您可以使用以下HTML创建范围滑块：

form id=' silderInput ' label for=' hue ' hue/label input id=' hue ' name=' hue ' type=' range ' min=' 0 ' max=' 300 ' value=' 0 ' label for=' contrast ' contrast/Labelinput id=' contrast ' name=' contrast ' type=' range ' min='-20 ' max=' 20 ' value=' 0 '/表单下面的jQuery代码块处理所有操作：

$('input[type=range]')。变更(应用过滤器)；函数applyFilters(){ var hue=parseInt($(' # hue ')。val())；var cntrst=Parseint($(' # contrast ')。val())；Caman('#canvas '，' image.jpg '，function(){ this . revert(false)；这个色调；this . contrast(cntrst)；this . render()；});}

每当输入范围滑块的值改变时，就调用applyFilters()函数。该函数用相应的变量存储所有范围滑块的值。为了编辑图像，这些值作为参数传递给相应的过滤器。

每次我这样称呼。显示(false)应用这些滤镜时，画布会恢复到原始状态。使用revert可以确保滤镜对原始图像进行操作，并且它们的效果不会混乱。传入的假参数值可以避免图像恢复过程中的间歇性闪烁。

另一个值得一提的细节是，即使我一次只更改其中一个，我也会将所有过滤器应用一次。这是因为用户在调整色调和亮度值时不希望看到对比度重置。

在CamanJS中创建自定义过滤器

这个库的一个很酷的特性是，您可以通过创建自己的过滤器和插件来扩展它。有两种方法可以创建自定义过滤器。您可以将内置过滤器与相应的值组合，也可以从头开始创建自己的过滤器。

以下是创建自己的过滤器的jQuery代码：

卡曼。Filter.register('oldpaper '，function() { this .针孔()；噪音(10)；this . OrganePeel()；this . render()；});

要从头开始创建过滤器，您需要一些额外的工作，因为有几个bug，您可以在GitHub资源库的“开放问题”部分阅读。

图层和混合模式

除了过滤器，CamanJS还带来了先进的图层系统。这个东西给你更多的图形操作能力和选择。CamanJS中的图层可以嵌套，而不是Photoshop中的图层。它使用混合模式将图层应用到其父嵌套图层。默认为常规混合模式。CamanJS中有十种混合模式，包括乘法、排除和叠加等常见模式。

以下是使用图层和混合模式创建自定义过滤器的jQuery代码：

卡曼。Filter.register('greenTint '，function(){ this . brightness(-10)；this . newlayer(function(){ this . setblendingmode(' overlay '))；不透明度(100)；this . FillColor(' # 689900 ')；this . filter . brightness(15)；this . filter . contrast(10)；});this . render()；});

过滤器应用于原始层和新层。此外，您可以为新图层设置其他属性，如不透明度和混合模式。我已经用固定的颜色填充了这个图层，但是您也可以通过调用this.overlayImage('image.jpg ')用另一张图片填充它。

操作跨域图像

如果需要管理不同域名下的图片，可以使用CamanJS提供的PHP代理。为了使用这个特性，您需要将这个PHP脚本放在您的服务器上。该脚本将充当代理，为您的浏览器提供来自远程数据源的图像数据，以避免编辑限制。然后，您需要在您的JavaScript中添加以下一行：

复制代码如下： caman . remote proxy=caman . io . useproxy(' PHP ')；

保存编辑过的图像

CamanJS内置了编辑后保存图像的机制。在当前的实现中，调用this.save(png)将打开一个弹出框用于文件下载，您需要重命名文件并添加png或jpg扩展名。这是因为当调用这个函数时，浏览器会将图像编码重定向到base64，但是他们不知道文件类型。下面给出的代码块将保存图像：

this . render(function(){ this . save(' png ')；});演示和完整的代码

您可以看看这个应用了所有功能的示例图像编辑器。截图如下：