Question

在使用了很多库来允许我操纵画布（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>

使用webGL插件的延迟（webgl-image-filter）

0 个答案: