Question

我正在创建一个项目来更改图片的颜色，对比度……。我使用filtrr插件。我想使用滑块选择效果值它运作良好，但速度不够快。

您可以在此处下载插件以执行代码：https://github.com/alexmic/filtrr/tree/master/filtrr2

代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css">
    <style>
        #slider {
            width: 200px!important;
        }
    </style>
</head>
<body>
    <div id="slider"></div>
    <img id="img" src="./o8rvhb.jpg">
    <canvas class="main" width="1024" height="512"></canvas>

    <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.js"></script>
    <script src="./filtrr2.js"></script>
    <script src="./util.js"></script>
    <script src="./effects.js"></script>
    <script src="./layers.js"></script>
    <script src="./events.js"></script>
    <script type="text/javascript">
        $( document ).ready( function() {
            var i = 0;

            $( "#slider" ).slider({
                max: 100,
                min: 0,
                orientation: "horizontal",
                slide: function(t, e) {
                    $( "img" ).hide();

                    Filtrr2.fx( 'color', function( value ) {
                        value = Filtrr2.Util.clamp(value, -100, 100);

                        this.process(function(rgba) {
                            rgba.r += value; 
                        });
                    });

                    var canvas = document.createElement( "canvas" );
                    canvas.setAttribute( "id", "test" + i );
                    canvas.setAttribute( "width", 1024 );
                    canvas.setAttribute( "height", 512 );

                    var canvasCtx = canvas.getContext( "2d" );
                    canvasCtx.drawImage( $( "img" )[0], 0, 0 );

                    $( "body" ).append( canvas );

                    var newfilter = Filtrr2( "#test" + i, function() {
                        this.contrast( e.value ).color( e.value ).render();
                    } )

                    $( ".main" )[0].getContext( "2d" ).drawImage( $( "#test" + i )[0] , 0, 0 )
                    $( "#test" + i ).remove();
                    i++;
                },
                stop: function(t, e) {
                }
            });
        } )
    </script>
</body>
</html>

使用filtrr插件通过滑块过滤器创建画布

0 个答案: