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

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

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

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

<!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 &lt; 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>