示例:JS 播放视频流时调整 色度, 饱和度,亮度,对比度

1.背景

一个需求是在播放视频流时,对视频流进行调整 色度, 饱和度,亮度,对比度等,要怎么实现呢?

完成后的截图:

image.png

2.思路

  • 1.使用video标签播放视频
  • 2.使用canvas播放视频,并捕获每个视频帧,这是可以获得每个像素的RGB色。
  • 3.将RGB 转成 HSL 色,对HSL色调整 色度, 饱和度,亮度
  • 4.调整完毕后,再转成 RGB,并绘制。
  • 5.完成

3.实现方式

播放视频

使用video标签来实现

<video id="video" src="video.ogm" 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() {
        // 执行 帧运算
        this.computeFrame();
        let self = this;
        setTimeout(function() {
            self.timerCallback();
        }, 0);
    }

    //  帧运算 的逻辑
    processor.computeFrame = function computeFrame() {
        // 在第一个 canvas 中绘制原图
        //.........略
    }

使用 canvas 处理视频

通过在一个 canvas (画布)上结合 video 元素功能,你可以实时地操纵视频数据来合成各种视觉特效到正在呈现的视频画面中。

色度, 饱和度,亮度,对比度 调整

即 获得图新的像素后 的RGB 色后,通过一个 js 库 ColorConverter 转成 HSL 格式。然后就可以通过 滑动块变更 HSL 中的参数值了。

获得ColorConverter进行 RGB 和HSL颜色格式的转换

ColorConverter 是 使用JavaScript函数定义RGB, HSL和HEX颜色之间的转换的一套 JS 类库

Github地址:https://github.com/SimonWaldherr/ColorConverter.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.附录

文章地址: https://www.jianshu.com/p/c1b8ff7f9c37Demo源代码地址:https://github.com/vir56k/demo/blob/master/video2/public/index_changge_hsl.html

5.参考

https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas

https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API/Manipulating_video_using_canvas

Javascript图像处理——亮度对比度https://www.cnblogs.com/justany/archive/2013/01/02/2842234.htmlJ

https://zhuanlan.zhihu.com/p/130345079
图像的熵、灰度平均值、灰度中值、方差https://blog.csdn.net/huixingshao/article/details/81152659

https://www.cnblogs.com/jwm1999/p/13056344.html

像素操作https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas

使用 canvas 处理视频https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API/Manipulating_video_using_canvas

  • 1
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值