使用CamanJS在Web頁面上處理影像的技巧

你可能會想問既然CSS已經有現成的功能可以支援基礎的映像操作了，為什麼我們還會想要為此使用一個像這樣的 JavaScript 函式庫。

好吧，除了有瀏覽器的支持，使用 CamanJS 有許多的好處。它為我們操作圖像提供了更多的濾鏡和選項。你可以在你的影像中建立進階濾鏡，進而控制其中的每一個像素。你可以使用其內建的混合模式和圖層系統。而它也能讓你進行影像的跨域操作，並且可以對操作產生的影像進行保存。

現在，就讓我們來開始探索 CamanJS 所提供的特性吧！

引入必要的文件

要開始使用CamanJS，需要簡單的將這個庫引入到你的頁面中. 我所引用的這個最小化的CDN 版本除了核心功能之外，所有的插件都被組合到了一個文件中:

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

登入後複製

從版本3到4，CamanJS 函數的語法有了一點小小的改變。因此請確保在跟隨這個教學進行實際操作時，你所引入的版本在4以上。

透過HTML屬性進行影像操作

CamanJS 可以用來利用 data-caman 屬性對影像進行操作。如下程式碼向你展示如何將一個亮度為「10」的濾鏡，以及一個對比度為「30」的濾鏡應用到一張圖片上：

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

登入後複製

其它可以用類似的語法加以運用的 18 個過濾器也被打包到了這個庫裡面。

例如：

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

登入後複製

透過 JavaScript 操作映像

你也可以選擇透過寫幾行 JavaScript 來操作一張圖片。使用 JavaScript 操作的結果跟使用 data-caman 屬性所產生的結果是一樣的。

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

登入後複製

實作一個影像編輯器中的控制項

過濾器其實不需要做過多的調整就可以用在按鈕點擊的觸發上. 一些像vintage(),lomo(), 以及sinCity() 這樣的過濾器不需要參數。其它像 contrast() 和 noise() 過濾器則需要一個整數值作為參數。這個值決定了過濾器的強度。

複雜的過濾器如 tiltShift(),posterize(), 以及 vignette() 則需要不只一個參數。下面的程式碼區塊示範如果用3個按鈕進行3種過濾器操作。針對其它的過濾器也可以像這樣寫程式碼。

下面是HTML：

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

登入後複製

以下是將過濾器套用到按鈕點擊上的 JavaScript/jQuery 程式碼：

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() 也接受另外的像startRadius 和radius 這樣的參數， Factor.vignette() 有size 和strength 這兩個參數，你可以參考 CamanJS 文件 來深入理解所有的過濾器。

實作滑桿控制

像 brightness, contrast, 和 hue 這樣需要相對更精確控制取值的過濾器，使用範圍值輸入滑桿就可以很好的工作。你將會看到，實作滑桿控制只比按鈕控制有稍微的不同. 你可以使用下面的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>

登入後複製

下面的jQuery程式碼區塊處理了所有操作：

$('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页面上处理图像很有帮助。

使用CamanJS在Web頁面上處理影像的技巧_jquery