人人人人人人人人人人人人

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

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

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

 

<!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>

　　

posted @ 2024-01-31 20:03  wgscd  阅读(21)  评论(0)  编辑  收藏  举报