日期：2017年10月24日

canvas渲染video视频，并添加图像设置功能，

本文主要展示使用canvas来实时的获取video并动态播放的例子。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
function drawCanvas() {
if (videoElement.paused || videoElement.ended) {
return;
}
var canvas = $("#canvas");
var _canvas = canvas.get(0);
context = _canvas.getContext("2d");
canvas.attr({
width: videoElement.videoWidth,
height: videoElement.videoHeight
})
 
context.clearRect(0, 0, videoElement.videoWidth, videoElement.videoHeight);
context.fillStyle = 'red';
context.fillStyle = 'rgba(255,255,0,0.5)';
context.drawImage(videoElement, 0, 0, videoElement.videoWidth, videoElement.videoHeight, 0, 0, videoElement.videoWidth, videoElement.videoHeight);
if (videoElement.videoWidth > 0 && videoElement.videoHeight > 0) {
var filters = "blur(" + (_blur.getCurVal() / 10) + "px) brightness(" + (_brightness.getCurVal() / 10) + ") contrast(" + (_contrast.getCurVal() / 10) + ") grayscale(" + (_grayscale.getCurVal() / 100) + ") hue-rotate(" + (_hue_rotate.getCurVal()) + "deg) invert(" + (_invert.getCurVal() / 100) + ") saturate(" + (_saturate.getCurVal() / 10) + ") sepia(" + (_sepia.getCurVal() / 100) + ")";
$("#canvas").css({
'-webkit-filter': filters,
'max-width': '100%'
});
}
setTimeout(drawCanvas, 24);
}