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

Question

我使用html5创建一个视频来循环并将视频绘制到画布上，我创建了多个画布并在每个画布上绘制视频的每个部分，但我发现一段时间后，它会导致谷歌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);
  }

这是printscreen：Google Chrome ran out of memory

无论如何都要阻止循环视频导致内存不足＆＃34;错误？

Answer 1

有很多代码丢失，所以无法说明内存的使用位置。很可能你要么关闭图像数据，要么保留引用，不要让浏览器删除它，或者你专门制作引用的副本，有效地做同样的事情。

此外，您不应该使用setTimeout来显示视频帧。使用requestAnimationFrame

要转换为灰色，您无需获取可以使用复合操作执行此操作的图像数据。

• Displaying video in canvas显示了如何在画布中显示视频。
• Canvas filters for realtime video FX展示如何使用内置画布globalCompositeOperation获取各种视频效果（包括黑色和白色），这比使用javascript中的手动处理像素要快得多且使用的内存少得多imageData数组。