⽰例：JS播放视频流时调整⾊度，饱和度，亮度，对⽐度1.背景 ⼀个需求是在播放视频流时，对视频流进⾏调整 ⾊度，饱和度，亮度，对⽐度等，要怎么实现呢？
完成后的截图：
image.png
2.思路
1.使⽤video标签播放视频
2.使⽤canvas播放视频，并捕获每个视频帧，这是可以获得每个像素的RGB⾊。
3.将RGB 转成 HSL ⾊，对HSL⾊调整 ⾊度， 饱和度，亮度
4.调整完毕后，再转成 RGB，并绘制。
5.完成
3.实现⽅式
播放视频
使⽤video标签来实现
<video id="video" src="" controls="true"/>
在播放时，通过 canvas 绘制，并处理图⽚帧
this.video.addEventListener('play', function() {
self.width = self.video.videoWidth / 2;
self.height = self.video.videoHeight / 2;
self.timerCallback();
}, false);
};
processor.timerCallback = function timerCallback() {
// 执⾏帧运算
let self = this;
setTimeout(function() {
self.timerCallback();
}, 0);
}
// 帧运算的逻辑
// 在第⼀个 canvas 中绘制原图
//.........略
}
使⽤ canvas 处理视频
通过在⼀个 canvas (画布)上结合 video 元素功能，你可以实时地操纵视频数据来合成各种视觉特效到正在呈现的视频画⾯中。
⾊度，饱和度，亮度，对⽐度调整
即 获得图新的像素后 的RGB ⾊后，通过⼀个 js 库 ColorConverter 转成 HSL 格式。然后就可以通过 滑动块变更 HSL 中的参数值了。获得ColorConverter进⾏ RGB 和HSL颜⾊格式的转换
ColorConverter 是 使⽤JavaScript函数定义RGB, HSL和HEX颜⾊之间的转换的⼀套 JS 类库
对⽐对调整
对⽐度调整公式如下：
RGB’=RGB+(RGB-Average)*Contrast/255
其中nRGB’代表了r,g,b各⾃重新计算后的值。Average是平均灰度值。 所以当Contrast为0时，RGB值不变，表⽰当前的⼀个对⽐度。
为-255时，RGB都为127，亮度都⼀样，没有差别，呈灰⾊。
为255时，在Average之上的像素点会变得更亮，反之变得更暗
本⽂附录部分有计算 平均灰度值 的⽅法
计算平均灰度值
// 计算某个帧的灰度平均值
function getGrayAverage(imagePixArray){
var average = function(dataArray){
let pixCount = dataArray.length / 4;
let sum = 0;
for (let i = 0; i < pixCount; i++) {
const pixOffset = i * 4;
let r = dataArray[pixOffset];
let g = dataArray[pixOffset+1];
let b = dataArray[pixOffset+2];
sum = sum + parseInt(0.299 * r + 0.587 * b + 0.114 * g); }
let aver = sum / dataArray.length;
return aver;
}// end inner function
return average(imagePixArray);
}// end
4.附录
5.参考
