使用CamanJS创建图像编辑器：应用基本过滤器

不久前，我写了一些教程，描述了如何仅使用CSS将不同类型的滤镜和混合模式应用于图像。 在要显示同一图像的灰度，模糊或高对比度版本的情况下，这可能非常有用。 除了创建四个不同的图像，您还可以仅使用几行CSS将这些效果应用于原始图像。

在大多数情况下，使用CSS过滤器和混合模式效果很好。 但是，CSS不会修改图像本身的像素。 换句话说，滤镜和混合模式或任何其他效果不是永久的。

如果有人下载了应用了CSS过滤器的图像，他们将获得原始图像，而不是修改后的版本。 如果您打算为用户创建图像编辑器，这可能是一个重大挫折。

如果您希望图像修改是永久的并允许用户下载修改后的图像，则可以使用HTML5 canvas 。 canvas元素使您可以做很多事情，包括绘制线条和形状，编写文本以及渲染动画。

在本教程中，我们将专注于编辑加载到画布上的图像。 CSS3已经具有内置功能，可让您直接应用对比度，亮度和模糊效果。 在使用HTML5画布时，我们将使用一个名为CamanJS的画布操作库来编辑图像。

该库支持开箱即用的基本效果，例如亮度，对比度和饱和度。 这将节省时间，并使我们能够基于这些基本过滤器创建更复杂的过滤器。

CamanJS基础

该库的名称基于以下事实：该库用于在JavaScript（JS）中进行画布（人）操作。 在开始使用库的其他功能之前，必须将其包含在项目中。 这可以通过下载库并自己托管或直接链接到CDN来完成 。

有两种使用库的方法。 第一种选择是对图像元素使用data-caman属性。 此属性可以接受不同CamanJS过滤器的组合作为其值。 例如，如果您想将图像的亮度增加20，对比度增加10，则可以使用以下HTML：

<img src="path/to/image.jpg"
     data-caman="brightness(20) contrast(10)">

同样，您可以应用其他滤镜，例如饱和度，曝光，噪声，棕褐色等。除了基本滤镜之外，CamanJS还允许您直接使用一些更复杂的滤镜。 这些滤镜可以类似的方式应用于图像。 要应用