Question

我正在处理基于画布的视频通信。

今天，当我尝试将视频捕捉到另一个画布时，我遇到了一个奇怪的错误。它有时会起作用，但有时不起作用。

这是代码。

$('#snap-button').on('click', function () {
  var source = $('#video')[0];
  var target = $('#photo')[0];
  var context = target.getContext('2d');
  context.drawImage(source, 0, 0, 800, 600);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- video -->
<canvas id="video" width="800" height="600"></canvas>

<!-- snapshot -->
<canvas id="photo" width="800" height="600"></canvas>

<button id="snap-button"></button>

```

但是当我测试这个bug时，我用静态画布替换视频画布，比如绘制一个回转，它可以100％正确地工作，但动态几乎不起作用。

我该怎么办？谢谢！

Answer 1

根据您的需要编辑此代码。这是一个工作示例，说明如何从视频制作快照到画布。

＆＃13;

var v = document.getElementById("video1");
var c = document.getElementById("myCanvas");

var ctx = c.getContext("2d");
$("#snap-button").click(function(){
    ctx.drawImage(v,5,5,260,125)
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Video to use:</p>

<video id="video1" controls width="270" autoplay>
  <source src="http://www.w3schools.com/tags/mov_bbb.mp4" type='video/mp4'>
  <source src="http://www.w3schools.com/tags/mov_bbb.ogg" type='video/ogg'>
  <source src=http://www.w3schools.com/tags/"mov_bbb.webm" type='video/webm'>
</video>

<p>Snapshot:</p>
<canvas id="myCanvas" width="270" height="135" style="border:1px solid #d3d3d3;"></canvas>
  
<br><br>
<input type="button" id="snap-button" value="Snap shot">

＆＃13;

来源：http://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_canvas_drawimage_video

将动态画布复制到另一个不起作用的画布

1 个答案: