Html5 canvas 如何在不同的画布上保留以前的HTML5视频

情况是这样的

我正在尝试在网络摄像头显示屏下方创建缩略图

这是我目前的代码：

<div class="row">
      <div class="col-md-6">
        <video onclick="snapshot(this);" width=400 height=400 id="video" controller autoplay></video>
        <button type="button" onclick="startWebcam();" style="background-color: #3c8dbc;border-color: #367fa9;color: #fff;border:0;height:30px;" >START WEBCAM</button>
        <button type="button" onclick="stopWebcam();" style="background-color: #3c8dbc;border-color: #367fa9;color: #fff;border:0;height:30px;" >STOP WEBCAM</button>
        <button type="button" onclick="snapshot();" id="snapShot" class="snapShot" style="background-color: #3c8dbc;border-color: #367fa9;color: #fff;border:0;height:30px;" >TAKE SNAPSHOT</button>
        <!-- <button type="button" class="savePicture"  style="background-color: #3c8dbc;border-color: #367fa9;color: #fff;border:0;height:30px;" >SAVE PICTURE</button> -->
    </div>

    <div class="col-md-6">
        <canvas id="canvas" width="640" height="480"></canvas>
    </div>
</div>

<div class="row">
    <div id="container" style="overflow: hidden;width: 200px;"> 
        <div id="inner" style="  overflow: hidden;  width: 200px;">
        
        </div>        
    </div>
</div>

启动网络摄像头
停止网络摄像头
拍快照

以下是我当前的JS代码：

 <script type="text/javascript">

   var video;
   var webcamStream;
   var clicks = 0;

   function startWebcam() {
        if (navigator.getUserMedia) {
        navigator.getUserMedia (

          // constraints
          {
             video: true,
             audio: false
          },

          // successCallback
         function(localMediaStream) {
              video = document.querySelector('video');
             //video.src = window.URL.createObjectURL(localMediaStream);
             video.srcObject = localMediaStream;
             webcamStream = localMediaStream;
             video.play();
         },

          // errorCallback
         function(err) {
             console.log("The following error occured: " + err);
         }
       );
    } else {
       console.log("getUserMedia not supported");
    }
  }

  function snapshot() {
    var canvas = document.getElementById("canvas");
    var context = canvas.getContext('2d');
    context.drawImage(video, 0,0, 640, 480);        

    clicks += 1;
    
    document.getElementById('inner').innerHTML = '';
    
    for (x=0; x < clicks; x++)
    {               
                              
        $(document).ready(function() { $('#inner').append('<div id="div-'+x+'" style="background-color: #fff;float: left; width: 250px;height: 250px;"><canvas id="canvas'+x+'" width="640" height="480"></canvas></div>'); });               
        
        var canvasx = document.getElementById("canvas"+x);
        var contextx = canvasx.getContext('2d');
        contextx.drawImage(video, 0,0, 100, 100);
        
        console.log(contextx);
    }     

  }

 </script>

var视频；
网络摄像机流；
var=0；
函数startWebcam（）{
if（navigator.getUserMedia）{
navigator.getUserMedia(
//约束条件
{
视频：没错，
音频：错误
},
//成功回调
函数（localMediaStream）{
video=document.querySelector（'video'）；
//video.src=window.URL.createObjectURL（localMediaStream）；
video.srcObject=localMediaStream；
webcamStream=localMediaStream；
video.play（）；
},
//错误回调
功能（err）{
log（“发生以下错误：“+err”）；
}
);
}否则{
log（“不支持getUserMedia”）；
}
}
函数快照（）{
var canvas=document.getElementById（“canvas”）；
var context=canvas.getContext（'2d'）；
drawImage（视频，0,060480）；
点击次数+=1；
document.getElementById（'inner'）。innerHTML=''；
对于（x=0；x

如何保留以前的图像并在旧图像旁边显示新图像？现在，它显示了不同的画布，但是，每次都显示相同的图像

谢谢,，

---

凯文

我找到了解决办法

问题在于画布不是数组。这就是我要做的

首先，我必须将画布创建为一个数组：

    var canvas = document.getElementById("canvas"),img, i, image_array = [];

然后我将画布放入一个url：

    var dataURL = canvas.toDataURL('image/jpg');

我将图像url推送到图像数组中：

    image_array.push(dataURL);

现在我创建了一个for循环：

     for (i = 0; i < image_array.length; i++) {  
      img = new Image();  
      img.src = image_array[i];  
      img.onload = (function(img, i){ 
      return function () {                         
           $(document).ready(function() { $('#inner').append('<div id="divimage" style="background-color: #fff;float: left; width: 300px;height: 300px;"><img style="width:250px; height:250px;" src="'+img.src+'" /></canvas></div>'); });                  
       }  
     })(img, i);
  }

（i=0；i img=新图像（）； img.src=image_数组[i]； img.onload=（函数（img，i）{ 返回函数（）{ $（document）.ready（function（）{$（'#inner'）.append（''）；}）； } })（img，i）； } 这解决了我的问题