共计 2097 个字符，预计需要花费 6 分钟才能阅读完成。
canvas Api 简略介绍
- ImageData
ImageData对象中存储着 canvas 对象实在的像素数据，它蕴含以下几个只读属性：
width：图片宽度，单位是像素height：图片高度，单位是像素data：Uint8ClampedArray 类型的一维数组，蕴含着 RGBA 格局的整型数据，范畴在 0 至 255 之间（包含 255）。
data属性返回一个 Uint8ClampedArray，它能够被应用作为查看初始像素数据。每个像素用 4 个 1bytes 值(依照红，绿，蓝和通明值的程序; 这就是 ”RGBA” 格局) 来代表。每个色彩值部份用 0 至 255 来代表。每个部份被调配到一个在数组内间断的索引，左上角像素的红色部份在数组的索引 0 地位。像素从左到右被解决，而后往下，遍历整个数组。
简略来说，咱们须要每隔 4 个为一组来取出每个像素点的 rgba 值
而后咱们联合 canvas 用来操作视频的个性，来进行绿幕抠图换背景。
先上效果图：
代码地址 ：gitee
预览地址：canvas-viide,gitee 最近整治 giteepage，先用 github 的了
实现思路
视频 ==> 视频截图 ==> 解决绿色像素为通明 ==> 贴图至背景图上方
将视频进行截图，再将视频中像素为绿色的像素块变为通明
再将解决好图片放在当时筹备好的背景图上方
实现
1. 筹备视频以及画布
<body onload="processor.doLoad()">
<div>
<video id="video" src="./q.mp4" width="350" controls="true"></video>
</div>
<div>
<!-- 视频截图 -->
<canvas id="c1" width="260" height="190"></canvas>
<!-- 解决绿色像素为通明 -->
<canvas id="c2" width="260" height="190"></canvas>
<!-- 贴图至背景图上方 -->
<canvas id="c3" width="260" height="190"></canvas>
</div>
</body>2. 增加视频播放监听
doLoad: function doLoad() {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");
this.c3 = document.getElementById("c3");
this.ctx3 = this.c3.getContext("2d");
let self = this;
this.video.addEventListener(
"play",
function() {
self.width = self.video.videoWidth / 5;
self.height = self.video.videoHeight / 3;
self.timerCallback();},
false
);
}3. 增加计时器
视频播放后进行调用，进行每一帧的截图抓取
timerCallback: function timerCallback() {if (this.video.paused || this.video.ended) {return;}
this.computeFrame();
let self = this;
setTimeout(function () {self.timerCallback();
}, 0);
}4. 进行视频帧操作
将绿色背景设置为通明，并贴图至自定义背景图上
computeFrame: function computeFrame() {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];
//rgb(8 204 4)
if (r > 4 && g > 100 && b < 100) {frame.data[i * 4 + 3] = 0;
}
}
this.ctx2.putImageData(frame, 0, 0);
this.ctx3.putImageData(frame, 0, 0);
return;
}5. 微调
//rgb(8 204 4)
绿色的视频色彩不纯，不是始终都是 rgb(8 204 4)，所以进行了简略的微调。。if (r > 4 && g > 100 && b < 100) {frame.data[i * 4 + 3] = 0;
}结尾
更多问题欢送退出前端交换群交换 749539640
代码地址：gitee
预览地址:canvas-viide
正文完
