Задержка с плагином webGL (webgl-image-filter) - PullRequest
Новая
       5

Задержка с плагином webGL (webgl-image-filter)

0 голосов
/ 04 сентября 2018

После использования большого количества библиотек, позволяющих мне манипулировать холстом (glfx, camanJS ...), я нашел: https://github.com/slub/webgl-image-filter.

Работает хорошо, но не быстро. Как я могу решить эту проблему?

Код: 

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css">

    <style>
        .slider {
            width: 200px;
        }
    </style>
</head>
<body>
    <div class="slider"></div>
    <script src="https://cdn.rawgit.com/phoboslab/WebGLImageFilter/e0eee0cd/webgl-image-filter.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
    <script>

        const image = new Image();
        image.crossOrigin = "anonymous";
        image.src = "https://picsum.photos/5000/2688?image=0";

        image.onload = function() {
          try {
            var filter = new WebGLImageFilter();
          }
          catch( err ) {
            console.log(err)
          }

          filter.addFilter('brightness', 0);

          var filteredImage = filter.apply(image);
          document.body.appendChild(filteredImage);

            $( ".slider" ).slider({
                min: 0,
                max: 100,

                slide: function( event, ui ) {
                    filter.addFilter('brightness', ui.value / 1000 );
                    var filteredImage = filter.apply(image);
                    document.body.appendChild(filteredImage);
                }
            })
        }
    </script>
</body>
</html>
...