视频透明度抠图，视频需要一个灰度通道副本表示透明度

目前抖音等直播平台的礼物特效就是这个方法处理的

<!DOCTYPE html>

<html>

  <head>

   <meta charset="UTF-8">

    <title>视频灰度通道抠图，视频包含灰度值表示透明的副本</title>

    <style>

     html, body {

	   ::-webkit-scrollbar {

          display: none;

         };

        background:rgba(0,0,0, 0); 

      }   

      div {

        padding:0px;

        margin: 0px;

      }

	  #c1 {

	    opacity: 0.001;

		position:absolute;

		left:0;

		top:0;

		z-index:0;

      }

     #c2 {

	    opacity: 1;

		position:absolute;

		left:0;

		top:0;

		z-index:3;

      }

    </style>

  </head>

 <body style="background:url(bg.jpg)">

 <div   style="position:absolute;top:80px;left:0px;z-index:0;opacity:0.001">

 <video width="555" height="777"

    id="video"

    src="media/789.dll"

    controls="true"

    crossorigin="anonymous"   autoplay muted/>

</div> 

<canvas id="c1" width="1440" height="1280"></canvas>

<canvas id="c2" width="720"  height="1280"></canvas>

<input type='button'  value="---change role---"  style=" height:58px;position:absolute;top:122px;left:0px;z-index:99;"

	  onclick='setRole(805)'></input>

  <script>

  const tolerance = 5;

  var roleId=1;

  function setRole(id){

   var video = document.getElementById("video");

   video.src='media/'+id+'.dll?'+new Date().getTime();

    processor.c2.style.opacity=1;

  // video.play();

   //idle();

  }

  function hideLayer()

  {

	 processor.c2.style.opacity=0;

  }

  let processor = {

    timerCallback: function() {

      if (this.video.paused || this.video.ended) {

	    console.log("video.ended");

		 this.c2.style.opacity=0;

        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", { willReadFrequently: true });

      this.c2 = document.getElementById("c2");

      this.ctx2 = this.c2.getContext("2d", { willReadFrequently: true });

      let self = this;

      this.video.addEventListener("play", function() {

          self.width = self.video.videoWidth ;

          self.height = self.video.videoHeight;

		  self.c2.style.width= self.width / 2;

		  self.c1.style.width= self.width;

		  console.log("w=" + self.video.videoWidth);

          self.timerCallback();

        }, false);

    },

    computeFrame: function() {

	  if(this.width<=0){

	    console.log("width:"+this.width);

	   return;

	  }

      this.ctx1.drawImage(this.video, 0, 0, this.width, this.height);

      let  frameOpcity= this.ctx1.getImageData(this.width / 2, 0, this.width / 2, this.height);

	  let frame = this.ctx1.getImageData(0, 0, this.width / 2, 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];

		let a= (r+ g+ b) / 3;

	    frameOpcity.data[i * 4 + 3] = a;

		}

      this.ctx2.putImageData(frameOpcity, 0, 0);

      return;

  }

}

document.addEventListener("DOMContentLoaded", () => {

  processor.doLoad();

});

  </script>

  </body>

</html>

　　

h5 canvas 视频透明度抠图，视频需要一个灰度通道副本表示透明度的更多相关文章

  1. H5 的直播协议和视频监控方案

    H5 的直播协议和视频监控方案 一.流媒体主要实现方式 二.流媒体技术 2.1 流媒体 2.2 直播 2.3 流协议 2.3.1 HLS 协议 2.3.2 RTMP 协议 2.3.3 RTSP 协议 ...

  2. canvas与html5实现视频截图功能

    这段时间一直在研究canvas,突发奇想想做一个可以截屏视频的功能,然后把图片拉去做表情包,哈哈哈哈哈哈~~ 制作方法: 1.在页面中加载视频 在使用canvas制作这个截图功能时,首先必须保证页面上 ...

  3. paper 116：自然图像抠图/视频抠像技术梳理（image matting, video matting）

    1. Bayesian Matting, Chuang, CVPR 2001.http://grail.cs.washington.edu/projects/digital-matting/paper ...

  4. EasyNVR网页H5无插件播放摄像机视频功能二次开发之直播通道接口保活示例代码

    背景需求 随着雪亮工程.明厨亮灶.手机看店.智慧幼儿园监控等行业开始将传统的安防摄像头进行互联网.微信直播,我们知道摄像头直播的春天了.将安防摄像头或NVR上的视频流转成互联网直播常用的RTMP.HT ...

  5. PyQt+moviepy音视频剪辑实战2：一个剪裁视频文件精华内容留存工具的实现

    专栏:Python基础教程目录 专栏:使用PyQt开发图形界面Python应用 PyQt+moviepy音视频剪辑实战 专栏:PyQt入门学习 老猿Python博文目录 老猿学5G博文目录 一.引言 ...

  6. 用H5 Canvas绘制一个仪表盘笔记

    前端有许多做数据可视化的图表插件,但有时候UI设计的图可能用现成的js插件无法定制或者比较麻烦(还不如自己造轮子来的快). 下面记录下用H5 canvas设计一个仪表盘代码: <!DOCTYPE ...

  7. moviepy音视频剪辑：视频基类VideoClip子类VideoFileClip、CompositeVideoClip、ImageSequenceClip介绍

    ☞ ░ 前往老猿Python博文目录 ░ 一.引言 在<moviepy音视频剪辑:moviepy中的剪辑相关类及关系>介绍了VideoClip主要有六个直接子类(VideoFileClip ...

  8. moviepy音视频剪辑：视频基类VideoClip子类DataVideoClip、UpdatedVideoClip、ImageClip、ColorClip、TextClip类详解

    ☞ ░ 前往老猿Python博文目录 ░ 一.概述 在<moviepy音视频剪辑:moviepy中的剪辑相关类及关系>介绍了剪辑相关类及关系,其中VideoClip有多个直接子类和间接子类 ...

  9. moviepy音视频剪辑：视频剪辑基类VideoClip的属性及方法详解

    ☞ ░ 前往老猿Python博文目录 ░ 一.概述 在<moviepy音视频剪辑:moviepy中的剪辑基类Clip详解>和<moviepy音视频剪辑:moviepy中的剪辑基类Cl ...

  10. C#控制台程序取得INSOYA视频区的视频的真实URL，视频标题，发布时间集合。

    准备工作 起因是因为这个网站:http://i.youku.com/kmsfan 这个是一个叫做冒险岛的游戏的资讯论坛,以前我经常在里面传视频,现在我不玩这个游戏了,但是很多玩家还是经常到我的网站里面 ...

随机推荐

  1. SSIS连接Excel2007版本之后的数据源

    今天我发现了新大陆,兴奋得不得了,由于原文写得太过详细与专业,我就偷偷懒直接Copy过来了,怕自己以后没地儿找,哈哈哈 原文链接:https://www.cnblogs.com/biwork/p/34 ...

  2. c++时间形式转换

    https://cplusplus.com/reference/ctime/ 先放上官方文档. ctime类里,有很多转换时间格式的方法,下面只举例将UTC时间,转换为字符串的代码. ‌‌Unix时间 ...

  3. Next.js 零基础开发入门教程2 构建基础脚手架 2024最新更新中｜曲速引擎 Warp Drive

    开发目标 我们将构建一个简化版本的财务仪表板,其内容包括:公共主页.登录页面.受身份验证保护的仪表板页面.用户可以添加.编辑和删除发票 这篇文章先创建一个简单的nextjs脚手架页面 安装pnpm包管 ...

  4. Java面试题中高级进阶（JVM篇Java垃圾回收）

    前言 本来想着给自己放松一下,刷刷博客,突然被几道面试题难倒!说说Java对象创建过程?知道类的生命周期吗?简述Java的对象结构?如何判断对象可以被回收?JVM的永久代中会发生垃圾回收么?你知道哪些 ...

  5. Qt Creator快捷键记录

    Ctrl + K:代码格式化(先选中要格式化的代码) F4:在头文件和源文件之间切换 Ctrl+/:注释和取消注释 F2:在声明和实现之间切换 Ctrl+K:打开定位器(locator),搜索文件名 ...

  6. 让性能提升56%的Vue3.5响应式重构之“版本计数”

    前言 Vue3.5响应式重构主要分为两部分:双向链表和版本计数.在上一篇文章中我们讲了 双向链表 ,这篇文章我们接着来讲版本计数. 欧阳年底也要毕业了,加入欧阳的面试交流群(分享内推信息).高质量vu ...

  7. PWN(栈溢出漏洞)-原创小白超详细[Jarvis-level0]

    ​ 题目来源:Jarvis OJ https://www.jarvisoj.com/challenges 题目名称:Level0 题目介绍: 属于栈溢出中的ret2text 意思是Return to ...

  8. 【一步步开发AI运动小程序】十五、AI运动识别中，如何判断人体站位的远近？

    [云智AI运动识别小程序插件],可以为您的小程序,赋于人体检测识别.运动检测识别.姿态识别检测AI能力.本地原生识别引擎,无需依赖任何后台或第三方服务,有着识别速度快.体验佳.扩展性强.集成快.成本低 ...

  9. bat隐藏窗口运行

    在bat脚本开头添加: if "%1" == "h" goto begin mshta vbscript:createobject("wscript. ...

  10. Windows系统安装使用Scoop包管理器

        前言 Scoop是Windows的命令行安装程序. 如果用过Linux系统,使用apt-get工具安装过软件,或者用过Python,知道pip工具用于管理Python各种依赖包,那么理解Sco ...