0%

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

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

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);
}