Question

我试图从DOM获取所有视频（相当多），为每个视频截取屏幕截图并将每个视频放入不同的画布中。 JSFiddle这里

这是我的尝试但却出现了这个错误：

未捕获的TypeError：无法读取属性＆＃39; getContext＆＃39;未定义的

知道如何解决这个问题吗？

  var videoArray = [];
  var canvasArray = [];
  var c = jQuery('<canvas/>',{'width':373.64,'height':227.88}); //set canvas

  jQuery('body').append(c); //append canvas to body

  // push each video into an array
  jQuery('video').each(function(){
      videoArray.push(this);
  });

  //push each canvas into an array
  jQuery('canvas').each(function(){
        canvasArray.push(this);

  });
    //for each video in the array, take a snapshot of the video at position i and draw it
    for(var i = 0; i < videoArray.length; i++){
        canvasArray[i].getContext("2d").drawImage(videoArray[i], 0, 0, 300,200);   

    }

Answer 1

好的，经过一些工作，我确实找到了解决方案。在我的代码中，我正在创建一个变量c并在其中创建一个画布。我接下来要做的就是将这个画布放入体内，但我把它放了一次。然后我继续在同一个画布上绘制所有图像。新的解决方案是为每个视频创建一个画布。这是更新的JSFiddle。这是感兴趣的代码。

 var videoArray = [];
 var canvasArray = [];
 var c = jQuery('<canvas/>', {
    'width': 373.64,
    'height': 227.88
 }); //set canvas

 //insert a canvas in each div
 jQuery('.wrapper').each(function(){
     jQuery('<canvas/>', {
        'width': 373.64,
        'height': 227.88
     }).appendTo('.wrapper');//append canvas to body
 });


 // push each video into an array
 jQuery('video').each(function() {
     videoArray.push(this);
 });

 //push each canvas into an array
 jQuery('canvas').each(function() {
     canvasArray.push(this);

 });
 //for each video in the array, take a snapshot of the video at position i and draw it
 for (var i = 0; i < videoArray.length; i++) {
     canvasArray[i].getContext("2d").drawImage(videoArray[i], 0, 0, 300, 200);

 }

从视频中截取屏幕截图并将其放入Canvas和JS中

1 个答案: