Попытка использовать Canvas и DrawImage для отображения низкоскоростного видео при 90 градусах - PullRequest
Новая
       21

Попытка использовать Canvas и DrawImage для отображения низкоскоростного видео при 90 градусах

1 голос
/ 04 февраля 2012

Я хотел бы отображать видео с повернутой камерой со скоростью 2 кадра в секунду. Следующий код отображает изображение размером 240 x 320, повернутое на 90 градусов. Изображение не обновляется, пока я не обновлю браузер. Источник, который меняется, - 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>

1 Ответ

1 голос
/ 04 февраля 2012

изображение не получает время для загрузки. попробуйте 

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