你可能會(huì)想問既然CSS已經(jīng)有現(xiàn)成的功能可以支持基礎(chǔ)的圖像操作了，為什么我們還會(huì)想要為此使用一個(gè)像這樣的 JavaScript 庫(kù)呢。

好吧，除了有瀏覽器的支持，使用 CamanJS 有許多的好處。它為我們操作圖像提供了更多的過濾器和選項(xiàng)。你可以在你的圖像中創(chuàng)建高級(jí)過濾器，進(jìn)而控制其中的每一個(gè)像素。你可以使用其內(nèi)置的混合模式和圖層系統(tǒng)。而它也能讓你進(jìn)行圖像的跨域操作，并可以對(duì)操作產(chǎn)生的圖像進(jìn)行保存。

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

引入必要的文件

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

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

從版本3到4，CamanJS 函數(shù)的語法發(fā)生了一點(diǎn)小小的改變。因此請(qǐng)確保在跟隨這個(gè)教程進(jìn)行實(shí)際操作時(shí)，你所引入的版本在4以上。

通過HTML屬性進(jìn)行圖像操作

CamanJS 可以被用來利用 data-caman 屬性對(duì)圖像進(jìn)行操作。如下代碼向你展示了如何將一個(gè)亮度為“10”的過濾器，以及一個(gè)對(duì)比度為“30”的過濾器應(yīng)用到一張圖片上：

<img data-caman="brightness(10) contrast(30)"
   src="yourimage.jpg" alt="CamanJS Javascript庫(kù) Web頁面 圖像處理">

其它可以用類似的語法加以運(yùn)用的 18 個(gè)過濾器也被打包到了這個(gè)庫(kù)里面。

例如：

<img data-caman="love() hazyDays()"
   src="yourimage.jpg" alt="CamanJS Javascript庫(kù) Web頁面 圖像處理">

通過 JavaScript 操作圖像

你也可以選擇通過寫幾行 JavaScript 來操作一張圖像。使用 JavaScript 操作的結(jié)果跟使用 data-caman 屬性所產(chǎn)生的結(jié)果是一樣的。

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

實(shí)現(xiàn)一個(gè)圖像編輯器中的控件

過濾器其實(shí)不需要做過多的調(diào)整就可以用在按鈕點(diǎn)擊的觸發(fā)上. 一些像 vintage(),lomo(), 以及 sinCity() 這樣的過濾器不需要參數(shù)。其它像 contrast() 和 noise() 過濾器則需要一個(gè)整型值作為參數(shù)。這個(gè)值決定了過濾器的強(qiáng)度。

復(fù)雜的過濾器如 tiltShift(),posterize(), 以及 vignette() 則需要不止一個(gè)參數(shù)。下面的代碼塊演示了如果用3個(gè)按鈕進(jìn)行3種過濾器操作。針對(duì)其它的過濾器也可以像這樣寫代碼。

下面是HTML：

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

下面是將過濾器應(yīng)用到按鈕點(diǎn)擊上的 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 這樣的參數(shù)， Factor.vignette() 有 size 和 strength 這兩個(gè)參數(shù)，你可以參考 CamanJS 文檔 來深入理解所有的過濾器。

實(shí)現(xiàn)滑塊控件

像 brightness, contrast, 和 hue 這樣需要相對(duì)更精確控制取值的過濾器，使用范圍值輸入滑塊就可以很好的工作。你將會(huì)看到，實(shí)現(xiàn)滑塊控件只比按鈕控制有稍微的不同. 你可以使用下面的HTML來創(chuàng)建范圍滑塊：

<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() 函數(shù)在輸入范圍滑塊的值發(fā)生改變時(shí)都會(huì)被調(diào)用。這個(gè)函數(shù)用對(duì)應(yīng)變量存儲(chǔ)了所有范圍滑塊的值。為了對(duì)圖像進(jìn)行編輯，這些值隨后會(huì)被作為參數(shù)傳遞到對(duì)應(yīng)的過濾器。

每次我都會(huì)在應(yīng)用這些過濾器時(shí)調(diào)用this.revet(false)，來時(shí)的canvas回到其原來的狀態(tài)。使用revert可以確保過濾器所操作的是原來的圖像，而它們的效果不會(huì)是混亂的. 傳入的false參數(shù)值可以避免在圖像還原過程中的間斷閃爍。

值得一提的另外一個(gè)細(xì)節(jié)是即使我一次只改變了它們其中的一個(gè)值，我也會(huì)將所有的過濾器應(yīng)用一遍。 這是因?yàn)橛脩舨粫?huì)希望在他們正調(diào)整色相和亮度值時(shí)看到對(duì)比度被重置。

在 CamanJS 中創(chuàng)建定制的過濾器

這個(gè)庫(kù)的許多其它特性中有一個(gè)很酷的特性就是，你可以通過創(chuàng)建你自己的過濾器和插件來對(duì)它進(jìn)行擴(kuò)展. 有兩種方法可以來創(chuàng)建定制的過濾器。你可以用對(duì)應(yīng)的值來組合內(nèi)置的過濾器，或者也可以從頭開始創(chuàng)建你自己的過濾器。

下面是創(chuàng)建你自己的過濾器的 jQuery 代碼：

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

要從頭開始創(chuàng)建過濾器，你需要一些額外的工作，這都是因?yàn)榇嬖趲讉€(gè)bug，你可以在 GitHub 資源庫(kù)的開放問題板塊 讀到有關(guān)這個(gè)的內(nèi)容。

圖層和混合模式

除了過濾器，CamanJS 還帶來了一個(gè)高級(jí)的圖層系統(tǒng)。這個(gè)東西給了你更多的圖形操作能力和選擇。不想 Photoshop 中的圖層，CamanJS 中的層可以嵌套。它使用混合模式來將層應(yīng)用到他們的上級(jí)嵌套層。默認(rèn)是一般的混合模式。CamanJS 總共有十種混合模式，包含有像 疊加（multiply）, 排除（exclusion）, 和 覆蓋（overlay）這些常用的。

如下是使用圖層和混合模式創(chuàng)建一個(gè)定制過濾器的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();
});

過濾器同時(shí)被應(yīng)用到原來的圖層和新圖層. 此外，你可以為新的圖層設(shè)置其它一些像不透明度（opacity） 和 混合模式 這樣的屬性. 我已經(jīng)用一個(gè)固定的顏色來填充了這一圖層，不過你也可以通過調(diào)用 this.overlayImage('image.jpg') 來用另外一張圖片對(duì)它進(jìn)行填充.

操作跨域圖像

如果你需要管理位于不用域名底下的圖像，你可以使用 CamanJS 一并提供了的 PHP 代理。為了能使用這個(gè)特性，你需要在你的服務(wù)器上面放置這個(gè) PHP 腳本 . 該腳本將作為代理向你的瀏覽器提供來自遠(yuǎn)程數(shù)據(jù)源的圖像數(shù)據(jù)，以規(guī)避編輯限制。之后你需要在你的JavaScript中添加下面這一行：

保存編輯后的圖像

CamanJS 內(nèi)置了編輯后保存圖像的機(jī)制。使用目前的實(shí)現(xiàn)，對(duì) this.save(png) 的調(diào)用會(huì)打開一個(gè)文件下載的彈出框，而你將需要對(duì)文件重新命名，并添加一個(gè)png或者jpg的擴(kuò)展名. 這是因?yàn)樵谡{(diào)用這個(gè)函數(shù)時(shí)，瀏覽器會(huì)將圖像的編碼重定向到 base64，而它們不知道文件的類型. 下面給出的代碼塊會(huì)保存圖片:

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

 Demo 跟完整代碼

你可以看一下這個(gè)應(yīng)用了所有特性的圖像編輯器樣例，截圖如下：

CamanJS Javascript庫(kù) Web頁面 圖像處理

作為練習(xí)，你可以嘗試改善下用戶體驗(yàn)，如標(biāo)記下當(dāng)前圖片上應(yīng)用的濾鏡或修改下保存按鈕來避免需要重命名的問題。

就像我們看到的， CamanJS 是一個(gè)非常有用的圖片操作庫(kù)，帶有很多濾鏡，還有不斷發(fā)展中的功能，而本教程僅僅講述了一個(gè)皮毛。

以上內(nèi)容比較長(zhǎng)，但是介紹的都很詳細(xì)，耐心閱讀，對(duì)學(xué)習(xí)使用CamanJS在Web頁面上處理圖像很有幫助。

最新評(píng)論