Tips for working with images on web pages using CamanJS_jquery

You may want to ask why we would want to use a JavaScript library like this since CSS already has ready-made functions to support basic image operations.

Well, besides browser support, there are many benefits to using CamanJS. It gives us more filters and options for manipulating images. You can create advanced filters on your images to control every pixel in them. You can use its built-in blending modes and layer system. And it also allows you to perform cross-domain operations on images and save the images generated by the operations.

Now, let’s start exploring the features CamanJS has to offer!

Introduce necessary files

To start using CamanJS, simply import the library into your pages. The minimal CDN version I quoted has all the plugins combined into a single file in addition to the core functionality:

<script src="https://cdnjs.cloudflare.com/ajax/libs/camanjs/4.1.2/caman.full.min.js">
</script>

From version 3 to 4, the syntax of CamanJS functions has changed slightly. So please make sure that when following this tutorial for actual operation, the version you import is 4 or above.

Image manipulation through HTML attributes

CamanJS can be used to manipulate images using the data-caman attribute. The following code shows you how to apply a filter with a brightness of "10" and a contrast of "30" to an image:

<img data-caman="brightness(10) contrast(30)"
   src="yourimage.jpg" alt="CamanJS Javascript库 Web页面 图像处理">

18 other filters that can be applied with similar syntax are also packaged in this library.

For example:

<img data-caman="love() hazyDays()"
   src="yourimage.jpg" alt="CamanJS Javascript库 Web页面 图像处理">

Manipulate images with JavaScript

You can also choose to manipulate an image by writing a few lines of JavaScript. The result of using JavaScript operations is the same as using the data-caman attribute.

Caman('#your-image-id', function () {
 this.brightness(40);
 this.contrast(-10);
 this.sinCity();
 this.render();
});

Implementing a control in an image editor

filters can be used to trigger button clicks without much adjustment. Some are like vintage(), lomo(), and sinCity() The filter requires no parameters. Other filters like contrast() and noise() require an integer value as argument. This value determines the strength of the filter.

Complex filters such as tiltShift(), posterize(), and vignette() require more than one parameter. The code block below demonstrates how to use 3 buttons to perform 3 filter operations. You can also write code like this for other filters.

The following is the HTML:

<canvas id="canvas"></canvas>
<button id="vintagebtn">Vintage</button>
<button id="noisebtn">Noise</button>
<button id="tiltshiftbtn">Tilt Shift</button>

Here’s the JavaScript/jQuery code that applies the filter to button clicks:

var vintage = $('#vintagebtn');
var noise = $('#noisebtn');
var tiltshift = $('#tiltshiftbtn');
  vintage.on('click', function(e) {
 Caman('#canvas', img, function() {
  this.vintage();
  this.render();
 });
});
  noise.on('click', function(e) {
 Caman('#canvas', img, function() {
  this.noise(10);
  this.render();
 });
});
  tiltshift.on('click', function(e) {
 Caman('#canvas', img, function() {
  this.tiltShift({
   angle: 90,
   focusWidth: 600
  }).render();
 });
});

tiltshift() also accepts additional parameters like startRadius and radius , Factor.vignette() has size and strength , you can refer to the CamanJS documentation for an in-depth understanding of all filters.

Implement slider control

For filters like

brightness, contrast, and hue that require relatively more precise control over their values, using the range value input slider can work well. As you'll see, implementing a slider control is only slightly different than a button control. You can create a range slider using the following 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</label>
 <input id="contrast" name="contrast" type="range" min="-20" max="20" value="0">
</form>

The following jQuery code block handles all operations:

$('input[type=range]').change(applyFilters);
  function applyFilters() {
 var hue = parseInt($('#hue').val());
 var cntrst = parseInt($('#contrast').val());
    Caman('#canvas', 'image.jpg', function() {
   this.revert(false);
   this.hue(hue);
   this.contrast(cntrst);
   this.render();
  });
}

applyFilters() 函数在输入范围滑块的值发生改变时都会被调用。这个函数用对应变量存储了所有范围滑块的值。为了对图像进行编辑，这些值随后会被作为参数传递到对应的过滤器。

每次我都会在应用这些过滤器时调用this.revet(false)，来时的canvas回到其原来的状态。使用revert可以确保过滤器所操作的是原来的图像，而它们的效果不会是混乱的. 传入的false参数值可以避免在图像还原过程中的间断闪烁。

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

在 CamanJS 中创建定制的过滤器

这个库的许多其它特性中有一个很酷的特性就是，你可以通过创建你自己的过滤器和插件来对它进行扩展. 有两种方法可以来创建定制的过滤器。你可以用对应的值来组合内置的过滤器，或者也可以从头开始创建你自己的过滤器。

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

Caman.Filter.register('oldpaper', function() {
 this.pinhole();
 this.noise(10);
 this.orangePeel();
 this.render();
});

要从头开始创建过滤器，你需要一些额外的工作，这都是因为存在几个bug，你可以在 GitHub 资源库的开放问题板块 读到有关这个的内容。

图层和混合模式

除了过滤器，CamanJS 还带来了一个高级的图层系统。这个东西给了你更多的图形操作能力和选择。不想 Photoshop 中的图层，CamanJS 中的层可以嵌套。它使用混合模式来将层应用到他们的上级嵌套层。默认是一般的混合模式。CamanJS 总共有十种混合模式，包含有像 叠加（multiply）, 排除（exclusion）, 和 覆盖（overlay）这些常用的。

如下是使用图层和混合模式创建一个定制过滤器的jQuery代码：

Caman.Filter.register('greenTint', function() {
 this.brightness(-10);
   this.newLayer(function() {
  this.setBlendingMode("overlay");
  this.opacity(100);
  this.fillColor('#689900');
  this.filter.brightness(15);
  this.filter.contrast(10);
 });
   this.render();
});

过滤器同时被应用到原来的图层和新图层. 此外，你可以为新的图层设置其它一些像不透明度（opacity） 和 混合模式 这样的属性. 我已经用一个固定的颜色来填充了这一图层，不过你也可以通过调用 this.overlayImage('image.jpg') 来用另外一张图片对它进行填充.

操作跨域图像

如果你需要管理位于不用域名底下的图像，你可以使用 CamanJS 一并提供了的 PHP 代理。为了能使用这个特性，你需要在你的服务器上面放置这个 PHP 脚本 . 该脚本将作为代理向你的浏览器提供来自远程数据源的图像数据，以规避编辑限制。之后你需要在你的JavaScript中添加下面这一行：

复制代码 代码如下:

Caman.remoteProxy = Caman.IO.useProxy('php');

保存编辑后的图像

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

this.render(function () {
 this.save('png');
}); 

 Demo 跟完整代码

你可以看一下这个应用了所有特性的图像编辑器样例，截图如下：

 

CamanJS Javascript库 Web页面 图像处理

作为练习，你可以尝试改善下用户体验，如标记下当前图片上应用的滤镜或修改下保存按钮来避免需要重命名的问题。

就像我们看到的， CamanJS 是一个非常有用的图片操作库，带有很多滤镜，还有不断发展中的功能，而本教程仅仅讲述了一个皮毛。

以上内容比较长，但是介绍的都很详细，耐心阅读，对学习使用CamanJS在Web页面上处理图像很有帮助。