canvas用于绘制视频
canvas相关方法介绍
1.ctx.getImageData(sx, sy, sw, sh)：其中sx、sy分别是起点的横纵坐标，sw和sh分别为将要提取的数据对应的矩形图像的宽度和高度；其返回值是一个imageData对象，包含宽度、高度、data（Uint8ClampedArray类型的数组）；
2.ctx.putImageData(imagedata, dx, dy)或者ctx.putImageData(imagedata, dx, dy, dirtyX, dirtyY, dirtyWidth, dirtyHeight)用于将一个imageData对象绘制到指定的位图中；其中dx/dy是目标图像相对源图像的坐标偏移；dirtyX/dirtyY是截取的源图像的起始坐标，默认为（0,0）；dirtyWidth/dirtyHeight则是目标图像的宽和高；
3. 通过ctx的getImageData和putImageData方法可以精细控制每帧图像的每个像素值；
4. 该过程中的视频处理其实就是对每一帧图像处理的一个连续过程，因此是一个递归；
demo —— green screen effect
直接看代码有点无趣，可以先看效果图增加点乐趣：
视频素材此处获取。需要注意的是：视频本身的宽高比和html中定义的视频框的宽高比并不同。视频自身的宽高可以通过video.videoWidth和video.videoHeight获取；注意代码中canvas的绘制尺寸也是以视频尺寸为基准的，因此需要根据视频本身的尺寸调整画布自身的尺寸，从而才能完整地绘制出视频的每一帧；
Green Screen Effect：使用纯色的背景可以很好地区分前景物体和背景，从而可以很容易地提取背景色特征并根据需求对背景进行相应的替换；具体处理可以使用PS取色器或其他工具从R、G、B三个通道综合分析前景色与背景色的非严格临界条件，从而从像素级别对背景进行替换；（效果图有些粗糙，不想花太多时间分析，原谅我太懒^_^）;
Imagedata使用的是四通道的RGBA颜色模式，因此像素数是imagedata长度的1/4，通过对R、G、B进行条件提取，将对应的Alpha通道设置为0（透明），从而将这部分满足特征的背景隐藏，使得替换的canvas背景图得以显现出来。
<html>
<head>
<style>
body {
background: black;
color:#CCCCCC;
}
#c2 {
background-image: url(a.png);
background-repeat: no-repeat;
}
div {
float: left;
border :1px solid #444444;
padding:10px;
margin: 10px;
background:#3B3B3B;
}
style>
head>
<body>
<div>
<video id="video" src="chicken.mp4" controls="true"/>
div>
<div>
<canvas id="c1" width="480" height="270">canvas>
<canvas id="c2" width="480" height="270">canvas>
div>
<script type="text/javascript">
let processor = {
timerCallback: function() {
if (this.video.paused || this.video.ended) {
return;
}
this.computeFrame();
let self = this;
setTimeout(function () {
self.timerCallback();
}, 0);
},
doLoad: function() {
this.video = document.getElementById("video");
this.c1 = document.getElementById("c1");
this.ctx1 = this.c1.getContext("2d");
this.c2 = document.getElementById("c2");
this.ctx2 = this.c2.getContext("2d");
let self = this;
this.video.addEventListener("play", function() {
self.width = self.video.videoWidth / 4;
self.height = self.video.videoHeight / 4;
self.timerCallback();
}, false);
},
computeFrame: function() {
this.ctx1.drawImage(this.video, 0, 0, this.width, this.height);
let frame = this.ctx1.getImageData(0, 0, this.width, this.height);
let l = frame.data.length / 4;
for (let i = 0; i < l; i++) {
let r = frame.data[i * 4 + 0];
let g = frame.data[i * 4 + 1];
let b = frame.data[i * 4 + 2];
if (g > 100 && r < 50)
frame.data[i * 4 + 3] = 0;
}
this.ctx2.putImageData(frame, 0, 0);
return;
}
};
document.addEventListener("DOMContentLoaded", () => {
processor.doLoad();
});
script>
body>
html>
运行结果：
参考文献：
- http://www.w3school.com.cn/tags/canvas_getimagedata.asp
- https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D/getImageData
- https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D/putImageData
- https://www.videvo.net/stock-video-footage/green screen/?page=1