透明视频的实现方法

偶然看到有透明视频的应用，很新奇，自己研究了一翻。

其实现核心是依靠canvas实时处理视频的每一帧，注意视频是左右视频（左边正常右边黑白）

废话不多说直接上核心代码

 

     video.addEventListener("play", function() {
            draw(this, canvas, cont2D, cw, ch);
       }, false)


      function cerateCanvas(w, h) {
            var cr = doc.createElement("canvas");
            cr.width = w;
            cr.height = h;
            return cr;
       }

       var isTrue = true;


       function draw(v, c, c2, w, h) {
           if(v.paused || v.ended) {
               cancelAnimationFrame(stop);
               return false;
           }
           c2.drawImage(v, 0, 0, w, h);
           var imageDate1 = c2.getImageData(0, 0, w/2, h),
               imageDate2 = c2.getImageData(w/2, 0, w/2, h);
          for(var i = 0, j = imageDate1.data.length; i < j; i+=4) {
              // console.log(imageDate2.data[i]);
              var charge1 = imageDate2.data[i],
                  charge2 = imageDate2.data[i + 1],
                  charge3 = imageDate2.data[i + 2];
              // imageDate1.data[i + 3] = 0;
             
             if((charge1 + charge2 + charge3)/3 < 100 ) {
                imageDate1.data[i + 3] = 0;
               }
           }
           c2.putImageData(imageDate1, 0, 0, 0, 0, w/2, h);
           var stop = requestAnimationFrame(function() {
               draw(v, c, c2, w, h);
           });
       }

 

有关完整示例请点击查看https://github.com/zi-kang/opcityVideo