To apply filter to an Konva.Image, we have to cache it first with cache()
function. Then apply filter with filters() function.
To enhance an image with Konva, we can use the Konva.Filters.Enhance filter
and set the enhance amount with the enhance property.
Instructions: Slide the control to adjust the enhance value.
For all available filters go to Filters Documentation.
Konva Enhance Image Demoview raw<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/[email protected]/konva.min.js"></script>
<meta charset="utf-8" />
<title>Konva Enhance Image Demo</title>
<style>
body {
margin: 0;
padding: 0;
overflow: hidden;
background-color: #f0f0f0;
}
#slider {
position: absolute;
top: 20px;
left: 20px;
}
</style>
</head>
<body>
<div id="container"></div>
<input id="slider" type="range" min="-1" max="1" step="0.01" value="20" />
<script>
var stage = new Konva.Stage({
container: 'container',
width: window.innerWidth,
height: window.innerHeight,
});
var layer = new Konva.Layer();
stage.add(layer);
Konva.Image.fromURL('/assets/lion.png', function (lion) {
lion.setAttrs({
x: 80,
y: 30,
enhance: 0.5,
draggable: true,
});
lion.cache();
lion.filters([Konva.Filters.Enhance]);
layer.add(lion);
var slider = document.getElementById('slider');
slider.oninput = function () {
lion.enhance(parseFloat(slider.value));
};
});
</script>
</body>
</html>
|