尝试使用Canvas和DrawImage以90度显示低码率视频答案

【问题标题】：Trying to use Canvas and DrawImage to display low-rate video at 90 degrees尝试使用Canvas和DrawImage以90度显示低码率视频
【发布时间】：2012-02-04 17:20:39
【问题描述】：

我想以 2 帧/秒的速度显示旋转的摄像机视频。以下代码显示旋转 90 度的 240 x 320 图像。除非我刷新浏览器，否则图像不会更新。正在更改的源是 cam_1.jpg。似乎一旦 DrawImage 有一个 src 图像，它确实会寻找更新。

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

<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>

【问题讨论】：

标签： html video canvas rotation drawimage

【解决方案1】：

图像没有时间加载。试试

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

【讨论】：

效果很好！谢谢！我已经为此工作了一周。我猜你所做的是将 cam.src 分配移到循环之外进行绘制，以便在尝试显示之前给新帧时间加载。也许你有更准确的描述。感谢您的时间和专业知识！完美运行。弗兰克