To apply filter to an Konva.Image, we have to cache it first with cache()
function. Then apply filter with filters() function.
To change rgba components of an image with Konva, we can use the Konva.Filters.RGBA.
Instructions: Slide the controls to change rgba values.
For all available filters go to Filters Documentation.
Konva RGBA Image Demoview raw<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/[email protected]/konva.min.js"></script>
<meta charset="utf-8" />
<title>Konva RGBA Image Demo</title>
<style>
body {
margin: 0;
padding: 0;
overflow: hidden;
background-color: #f0f0f0;
}
#controls {
position: absolute;
top: 20px;
left: 20px;
}
</style>
</head>
<body>
<div id="container"></div>
<div id="controls">
Red:
<input id="red" type="range" min="0" max="256" step="1" value="150" />
Green:
<input id="green" type="range" min="0" max="256" step="1" value="150" />
Blue:
<input id="blue" type="range" min="0" max="256" step="1" value="150" />
Alpha:
<input id="alpha" type="range" min="0" max="1" step="0.05" value="0.5" />
</div>
<script>
Konva.Image.fromURL('../../../assets/lion.png', function (lion) {
var stage = new Konva.Stage({
container: 'container',
width: window.innerWidth,
height: window.innerHeight,
});
var layer = new Konva.Layer();
lion.position({
x: 50,
y: 50,
});
lion.cache();
lion.filters([Konva.Filters.RGBA]);
layer.add(lion);
stage.add(layer);
var sliders = ['red', 'green', 'blue', 'alpha'];
sliders.forEach(function (attr) {
var slider = document.getElementById(attr);
function update() {
lion[attr](parseFloat(slider.value));
}
slider.oninput = update;
update();
});
});
</script>
</body>
</html>
|