做者:雲荒杯傾css
Seriously.js是一個實時的,基於節點(node)的(注意:不是基於nodejs)web視頻合成器。受after affects和nuke等專業軟件的啓發,Seriously.js能渲染高質量的可交互的視頻動態效果。html
git clone https://github.com/brianchirl...node
和其餘js庫同樣,使用Seriously.js的第一步是在HTML頁面中加載Seriously.js的腳本庫。Seriously.js核心腳本(就是Seriously.js)和Seriously的各個動效腳本(放在effects目錄下)是分開的,你能夠按需加載核心腳本和動效腳本。git
代碼加載以下:github
<!DOCTYPE html> <html> <head><title>Seriously.js Tutorial</title></head> <body> <!-- page content goes here --> <script src="seriously.js"></script> <script src="effects/seriously.vignette.js"></script> <script src="effects/seriously.hue-saturation.js"></script> <script src="effects/seriously.split.js"></script> <script> //main code goes here </script> </body> </html>
Seriously.js能夠處理的數據源有video和image,本例中,使用img元素。在HTML中寫下:web
<img src="images/colorbars.png" id="colorbars"/>
Seriously.js通常將數據源的處理結果放在canvas上展現,因此,再在HTML上畫一個canvas:canvas
<canvas id="canvas" width="640" height="480"></canvas>
一般咱們會將數據源隱藏起來,無論是用css的display: none,仍是用JavaScript建立一個不掛載任何dom元素的對象。不過本例爲了你觀察效果,就不隱藏那個img了。網絡
如今就可使用Seriously.js寫腳本,以建立和渲染咱們的合成器了。最簡單的合成器就是直接將img和canvas連起來,不使用任何動效。dom
// 聲明變量 var seriously, // 主對象 colorbars, // img數據源對象 target; // 目標canvas對象 seriously = new Seriously(); // 建立數據源對象 colorbars = seriously.source('#colorbars'); // 建立目標canvas對象 target = seriously.target('#canvas');
下面代碼能夠將img和canvas聯繫起來:ide
// 鏈接任何節點(node)做爲canvas的數據源. 咱們只有一個,就是img. target.source = colorbars; seriously.go();
當咱們建立了數據源對象(本例是img),目標輸出對象(本例是canvas),而且創建好了數據源和目標之間的聯繫網絡以後,seriously.js並不會就幫咱們渲染。咱們須要執行seriously.go()方法,纔開始渲染。
如今你會看到那個圖片的兩個副本,一個是在img顯示的,一個是在canvas顯示的。
這樣就完成了最簡單合成器。其實就是複製一份圖像到canvas。
若是隻實現上面那個,就太無聊了。因此咱們要繼續下一步,實現一個vignette特效。在最前面加載Seriously.js腳本那一節,咱們已經把vignette特效的腳本加載進去了(就是下面那一行代碼),如今要作的就是建立一個特效節點(node),而且把這個節點插入到合成器的特定位置。
<script src="effects/seriously.vignette.js"></script>
建立一個特效節點和建立數據源節點以及目標節點相似,不過彷佛更簡單,只要在參數裏面傳特效的名字就行了。
var vignette = seriously.effect('vignette');
OK,如今,全部節點又一次都建立好了。咱們要把這些節點按順序連起來。一個Seriously合成器就是一個數據源節點、目標節點、特效節點的網絡。這三種都是節點,images從一個特效節點傳到另外一個特效節點,在新的特效節點進行對應的圖像修改,繼續傳到下一個特效節點,直到遇到target節點,也就是目標,通常是canvas,就把最終結果顯示出來。特效節點能夠有一個或者多個圖像數據源,輸出一個單幅圖片。
在本例,咱們傳一副圖像從源節點到 vignette 節點,在 vignette 節點作了特效修改後,再傳到target目標節點。因此完整的腳本以下:
// 聲明變量 var seriously, // 主對象 colorbars, // 數據源圖像節點 vignette, // 特效節點 target; // 目標節點 seriously = new Seriously(); colorbars = seriously.source('#colorbars'); target = seriously.target('#canvas'); vignette = seriously.effect('vignette'); // 按正確順序鏈接全部節點 vignette.source = colorbars; target.source = vignette; //渲染結果 seriously.go();
從新加載頁面,就能夠看到vignette特效了,圖像邊界變深色。
或者說是另外一種腳本寫法。
上面代碼中:
// 按正確順序鏈接全部節點 vignette.source = colorbars;
這一行其實能夠簡寫爲:
vignette.source = '#colorbars';
由於seriously知道vignette.source後面必定要跟一個圖像htmlElement或者一個圖像節點(colorbars = seriously.source('#colorbars');),因此,若是你直接跳過colorbars = seriously.source('#colorbars')這一行,給它賦值一個HTMLElement,也是能夠的。
這算是seriously爲開發者提供的一種方便吧。
大多數特效儘管有默認顯示的效果,可是對這些效果進行微調也是常常遇到的。在seriously中,每一種特效都有一些參數能夠調整,咱們如今用的這種vignette 特效,只有一個amount屬性,默認值是1。
咱們能夠簡單的按下面代碼設置一下這個參數。下面兩行你選哪行都行:
vignette.amount = 10; //or... vignette.amount = 0.1;
seriously的特效參數的值通常是有特定範圍,好比這個amount,就有最小值:0。若是你給他設了一個負值,其實他會默認從新設爲0。
vignette.amount = -42; console.log(vignette.amount); // 結果爲0
另外,若是你給參數值設置了錯誤的類型,它會從新設置成默認值。好比下面:
vignette.amount = 'aaaaaaaaaaaaaa'; console.log(vignette.amount); // 結果爲1,上面說了amount的默認值是1。
如何讓這個參數變得可交互呢?HTML5給input提供了type=「range」。咱們能夠用它讓amount參數的值在HTML頁面隨便調整。
html部分:
<input type="range" id="vignette-range" min="0" max="20" step="0.0001" value="1"/>
腳本部分:
vignette.amount = '#vignette-range';
或者這樣寫:
vignette.amount = document.getElementById('vignette-range');
如今你就能夠在range條的範圍內,任何調整amount的值了。