Javascript 防止循环视频导致浏览器内存不足

我使用html5创建了一个视频循环，并将视频绘制到画布上，我创建了多个画布，并在每个画布上绘制视频的每个部分，但我发现一段时间后，它会导致google chrome内存不足

下面是在画布上绘制视频的代码

v.addEventListener('play', function(){
      cw = v.clientWidth * convas_rate_width;
      ch = v.clientHeight * convas_rate_height;
      canvas.width = (videoWidth/matrix_x) * canvas_location_x;
      canvas.height = (videoHeight/matrix_y) * canvas_location_y;
      back.width = cw;
      back.height = ch;


      draw(v,context,context,cw,ch,x,y,matrix_x, matrix_y);
    },false);

function draw(v,c,bc,w,h,x,y,matrix_x,matrix_y) {
    if(v.paused || v.ended) return false;
    // First, draw it into the backing canvas

    var x_coord = -((w/matrix_x) * x);
    var y_coord = -((h/matrix_y) * y);

    bc.drawImage(v,x_coord,y_coord,w,h);
    // Grab the pixel data from the backing canvas
    var idata = bc.getImageData(0,0,(w),(h));


    var data = idata.data;
    // Loop through the pixels, turning them grayscale

    idata.data = data;
    // Draw the pixels onto the visible canvas
    c.putImageData(idata,0,0);
    // Start over!
    setTimeout(draw,10,v,c,bc,w,h,x,y,matrix_x, matrix_y);
  }

以下是打印屏幕：

---

是否有任何方法可以防止循环视频导致“内存不足”错误？

缺少大量代码，因此无法说出内存的使用位置。最有可能的情况是，您关闭了图像数据，从而保留了一个引用，而不让浏览器删除它，或者您专门制作了一个引用的副本，有效地执行了相同的操作

此外，不应使用setTimeout显示视频帧。使用

requestAnimationFrame

要转换为灰色，不需要获取图像数据，可以使用合成操作来实现

• 演示如何在画布中显示视频
• 演示如何使用内置的canvas

  globalCompositeOperation

  获取各种视频效果（包括黑白），与通过

  imageData

  数组在javascript中手动处理像素相比，该操作速度更快，占用的内存更少