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="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>
数据源media和目标canvas
Seriously.js可以处理的数据源有video和image,本例中,使用img元素。在HTML中写下:
<img src="images/colorbars.png" id="colorbars"/>
Seriously.js一般将数据源的处理结果放在canvas上展示,所以,再在HTML上画一个canvas:
<canvas id="canvas" width="640" height="480"></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="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的值了。
原文地址:https://www.cnblogs.com/jlfw/p/12208367.html