Web视频合成器Seriously.js入门教程
Seriously.js是一个实时的，基于节点（node）的（注意：不是基于nodejs）web视频合成器。受after affects和nuke等专业软件的启发，Seriously.js能衬着高质量的可交互的视频动态效果。
下载Seriously.js库git clone https://github.com/brianchirl...
加载Seriously.js脚本和其他js库一样，使用Seriously.js的第一步是在HTML页面中加载Seriously.js的脚本库。Seriously.js核心脚本（就是Seriously.js）和Seriously的各个动效脚本（放在effects目录下）是分隔的，你可以按需加载核心脚本和动效脚本。
代码加载如下：
<!DOCTYPE html> <html> <head><title>Seriously.js Tutorial</title></head> <body> <!-- page content goes here --> <script src="http://www.mamicode.com/seriously.js"></script> <script src="http://www.mamicode.com/effects/seriously.vignette.js"></script> <script src="http://www.mamicode.com/effects/seriously.hue-saturation.js"></script> <script src="http://www.mamicode.com/effects/seriously.split.js"></script> <script> //main code goes here </script> </body> </html> 数据源media和方针canvasSeriously.js可以措置惩罚惩罚的数据源有video和image，本例中，使用img元素。在HTML中写下：
<img src="http://www.mamicode.com/images/colorbars.png"/>Seriously.js一般将数据源的措置惩罚惩罚功效放在canvas上展示，所以，再在HTML上画一个canvas：
<canvas></canvas>凡是我们会将数据源隐藏起来，不管是用css的display: none，还是用JavaScript创建一个不挂载任何dom元素的东西。不过本例为了你不雅察看效果，就不隐藏阿谁img了。
使用Seriously.js将数据源img和方针canvas联系起来此刻就可以使用Seriously.js写脚本，以创建和衬着我们的合成器了。最简单的合成器就是直接将img和canvas连起来，不使用任何动效。
// 声明变量 var seriously, // 主东西 colorbars, // img数据源东西 target; // 方针canvas东西 seriously = new Seriously(); // 创建数据源东西 colorbars = seriously.source(‘#colorbars‘); // 创建方针canvas东西 target = seriously.target(‘#canvas‘);下面代码可以将img和canvas联系起来：
// 连接任何节点（node）作为canvas的数据源. 我们只有一个，就是img. target.source = colorbars; seriously.go();当我们创建了数据源东西（本例是img），方针输出东西（本例是canvas），并且成立好了数据源和方针之间的联系网络之后，seriously.js并不会就帮我们衬着。我们需要执行seriously.go()要领，才开始衬着。
此刻你会看到阿谁图片的两个副本，一个是在img显示的，一个是在canvas显示的。
这样就完成了最简单合成器。其实就是复制一份图像到canvas。
应用你的第一个特效如果只实现上面阿谁，就太无聊了。所以我们要继续下一步，实现一个vignette特效。在最前面加载Seriously.js脚本那一节，我们已经把vignette特效的脚本加载进去了(就是下面那一行代码)，此刻要做的就是创建一个特效节点（node）,并且把这个节点插入到合成器的特定位置。
<script src="http://www.mamicode.com/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‘;温馨提示: 本文由Jm博客推荐，转载请保留链接: https://www.jmwww.net/file/web/31439.html
![[转]Node.js中package.json中^和~的区别](/uploads/allimg/200519/054J34453_lit.png "[转]Node.js中package.json中^和~的区别")