Dispite the tutorial here https://konvajs.org/docs/filters/Multiple_Filters.html of using multiple filters, I have been unsuccessful in applying multiple to an image in a NodeJS space.
Here is an example of the "fun" I went through trying to get it to work:
(Konva, layer, imageNode) => {
console.log('Callback');
imageNode.cache();
// imageNode.filters([
// Konva.Filters.Brighten,
// Konva.Filters.HSL,
// ]);
imageNode.filters([Konva.Filters.Posterize]);
imageNode.levels(0.8); // between 0 and 1
// imageNode.brightness(0.8);
// imageNode.contrast(0.8);
// imageNode.saturation(0.8);
// imageNode.cache();
// imageNode.filters([
// // Konva.Filters.Brighten,
// Konva.Filters.HSL,
// ]);
// imageNode.hue(0.5);
// imageNode.saturation(0.8);
// imageNode.luminance(0.85);
imageNode.cache();
As you can see, I'm trying to use a mix of brightness, contrast, saturation, hue, lumiance; however some work, some don't, and it all doesn't seem very reliable and if any work, only one ever does.
So how do I for example, brighten, and saturate an image?
Example Image I would like to "bring into the light" by adjusting different factors of it.
My end goal is something like this:
Update #1
No Luck, I cannot even get brightness to work on a small 50x35 image:
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/konva@8.3.12/konva.min.js"></script>
<meta charset="utf-8" />
<title>Konva Image Demo</title>
<style>
body {
margin: 0;
padding: 0;
overflow: hidden;
background-color: #f0f0f0;
}
</style>
</head>
<body>
<div id="container"></div>
<script>
var width = window.innerWidth;
var height = window.innerHeight;
var stage = new Konva.Stage({
container: 'container',
width: width,
height: height,
});
var layer = new Konva.Layer();
// main API:
var imageObj = new Image();
imageObj.onload = function () {
var imageNode = new Konva.Image({
x: 0,
y: 0,
image: imageObj,
width: 50, // 2048 / 2,
height: 35, // 1440 / 2,
});
imageNode.cache({ pixelRatio: 1})
imageNode.filters([
Konva.Filters.Brighten,
// Konva.Filters.HSL,
// Konva.Filters.Invert
]);
// imageNode.filters([Konva.Filters.Posterize]);
// imageNode.levels(0.2); // between 0 and 1
imageNode.brightness(0.8);
// imageNode.contrast(0.8);
// imageNode.saturation(0.8);
// imageNode.cache({ pixelRatio: 1})
// imageNode.filters([
// // Konva.Filters.Brighten,
// Konva.Filters.HSL,
// ]);
// imageNode.hue(0.5);
// imageNode.saturation(0.8);
// imageNode.luminance(0.85);
// imageNode.cache({ pixelRatio: 1})
layer.add(imageNode);
stage.add(layer);
};
imageObj.src = 'C:/Users/<User>/Downloads/Small.png';
</script>
</body>
</html>
Update #2
Ok this seems to be firstly an issue with doing this off a local html file, as not even taking the code from https://konvajs.org/docs/filters/Brighten.html and swapping in an absolute path to a file on my machine, works.
