透明视频的实现方法

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

其实现核心是依靠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]);