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>
|