尝试使用Canvas和DrawImage以90度显示低速率视频 [英] Trying to use Canvas and DrawImage to display low-rate video at 90 degrees
本文介绍了尝试使用Canvas和DrawImage以90度显示低速率视频的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想以2帧/秒的速度显示旋转的相机视频。以下代码显示以90度旋转的240 x 320图像。除非刷新浏览器，否则图像不会更新。正在改变的源是cam_1.jpg。看来，一旦DrawImage有一个src图像，它会寻找更新。
I would like to display rotated camera video at a rate of 2 frames/second. The following code displays a 240 x 320 image rotated at 90 degrees. The image does not update unless I refresh the browser. The source that is changing is cam_1.jpg. It seems that once DrawImage has a src image, it does look for an update.
我还没有学到什么？感谢您的时间和专业知识。
What have I not learned yet? Thank You for your time and expertise.
<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>
推荐答案
图片无法加载。 try
the image is not getting time to load. try
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);
}
这篇关于尝试使用Canvas和DrawImage以90度显示低速率视频的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
