复制动态画布到另一个画布不工作

Copy dynamic canvas into another canvas not working

本文关键字：布不 工作 另一个 动态 复制      更新时间：2023-09-26

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

今天，当我试图将视频捕获到另一个画布时，我遇到了一个奇怪的错误。有时有效，有时无效。

代码如下:

$('#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%正确工作，但动态几乎不工作。

我该怎么办?谢谢!

按您的意愿编辑下面的代码。这是一个工作的例子，你可以把快照从视频到画布。

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

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

相关文章：