Я создаю проект для изменения цвета, контраста ... картинки. Я использую плагин filterrr. Я хочу использовать ползунок, чтобы выбрать значение эффекта
Работает хорошо, но недостаточно быстро.
Вы можете скачать плагин здесь, чтобы выполнить код: 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>