试图使用画布和DrawImage以90度显示低速率视频

我想以2帧/秒的速率显示旋转的摄像机视频。以下代码显示以90度旋转的240 x 320图像。除非我刷新浏览器，否则图像不会更新。正在改变的来源是cam_1.jpg。看起来，一旦DrawImage有一个src图像，它会寻找更新。试图使用画布和DrawImage以90度显示低速率视频

我还没有学到什么？感谢您的时间和专业知识。

<title>CamDisplay</title></head><body> 
<canvas height="320" width="240"></canvas> 
<script type="text/javascript" charset="utf-8"> 
    var cam = new Image; 
    window.onload = function(){ 
     var c = document.getElementsByTagName('canvas')[0]; 
     var ctx = c.getContext('2d'); 
     setInterval(function(){ 
      ctx.save(); 
      ctx.clearRect(0, 0, 240, 320); 
      ctx.translate(240, 0); 

      cam.src = 'cam_1.jpg?uniq='+Math.random(); 

      ctx.rotate(1.57); 
      ctx.drawImage(cam, 0, 0); 
          ctx.restore(); 
     },500); 
    }; 
</script> 
</body> 
</html>

来源

2012-02-04 Frank

图像没有时间加载。尝试

var cam = new Image; 
var c = document.getElementsByTagName('canvas')[0]; 
var ctx = c.getContext('2d'); 

cam.onload = function() { 
     ctx.save(); 
     ctx.clearRect(0, 0, 240, 320); 
     ctx.translate(240, 0); 
     ctx.rotate(1.57); 
     ctx.drawImage(this, 0, 0); 
     ctx.restore(); 
    } 

window.onload = function(){ 
    setInterval(function(){ 
     cam.src = 'cam_1.jpg?uniq='+Math.random(); 
    },500); 
}

来源

2012-02-04 09:20:39

完美的工作！谢谢！我一直在为此工作一周。我猜你所做的是将cam.src赋值移到循环外部进行绘制，以便在尝试显示它之前给新的帧时间加载。也许你有更准确的描述。感谢您的时间和专业知识！完美的作品。弗兰克 – Frank 2012-02-04 14:53:18

很高兴它的工作，你能接受答案！谢谢 – 2012-02-04 17:26:40

试图使用画布和DrawImage以90度显示低速率视频

回答

相关问题