Блог

Главная - Вопросы по программированию - Улучшите производительность JavaScript для визуализации изображения

Улучшите производительность JavaScript для визуализации изображения

#javascript #html #image #canvas #setinterval

Вопрос:

У меня есть простой html-код, который отображает изображение каждые 125 мс. Цель состоит в том, чтобы отобразить видео, снятое с камеры. Изображение отображается в контейнере Canvas, и для повторения функции updateImg() каждый раз, когда я использую метод setInterval.

Мой код по-прежнему правильно работает в браузере моего ПК, но меньше, если я использую браузер старого планшета с Android 4 (есть небольшая задержка).

Это мой код:

 <!DOCTYPE html>
<html>
    <head>
    <meta http-equiv='pragma-directive' content='no-cache'>
    <meta http-equiv='cache-directive' content='no-cache'>
    <meta http-equiv='cache-control' content='no-cache'>
    <meta http-equiv='pragma' content='no-cache'>
    <meta http-equiv='expires' content='0'>
    <title>Canvas</title>
        <script>
            var img = new Image();
            img.src='http://10.0.9.231:3000/camera?i=' (new Date()).getTime();  
            
            function updateImg(){
                var onScreenContext = document.getElementById("myCanvas").getContext('2d');

                onScreenContext.drawImage(img, 0, 0);
                    img.src='http://10.0.9.231:3000/camera?i=' (new Date()).getTime();
            }
        </script>
    </head>
    <body>
    <canvas id="myCanvas" width="768px" height="432px">
        Canvas not supported
    </canvas>
    <script>
        setInterval(updateImg, 125);
    </script>
    </body>
</html>

Можно ли улучшить его производительность?

Ответ №1:

Может быть, попробуем что-нибудь пообещать? например, какая-то функция «бесконечного цикла» с вызовом обещания, и если это обещание выполнено, вы снова вызываете функцию

Метки: