如何将以前的html 5视频保留在不同的画布上

问题描述

这是情况。

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

这是我当前的代码：

<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,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,100,100);
        
        console.log(contextx);
    }     

  }

 </script>

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

谢谢， 凯文

解决方法

我找到了解决方法。

问题出在内部，画布不是数组。所以这就是我要做的。

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

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

然后我将画布放入URL：

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

我将图片网址推入图片数组：

    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);
  }

这解决了我的问题。