HTML5 Canvas Brighten Image Filter Tutorial
Note: This filter is deprecated and will be removed in the future. Use the Brightness
filter instead.
To apply filter to an Konva.Image
, we have to cache it first with cache()
function. Then apply filter with filters()
function.
To brighten or darken an image with Konva, we can use the Konva.Filters.Brighten
filter and set the brightness amount with the brightness
property.
The brightness
property can be set to any integer between -1 and 1.
Negative values darken the image, and positive values brighten the image.
Instructions: Slide the control to adjust the brightness
For all available filters go to Filters Documentation.
import Konva from 'konva';
const width = window.innerWidth;
const height = window.innerHeight;
const stage = new Konva.Stage({
container: 'container',
width: width,
height: height,
});
const layer = new Konva.Layer();
stage.add(layer);
const imageObj = new Image();
imageObj.onload = () => {
const image = new Konva.Image({
x: 50,
y: 50,
image: imageObj,
draggable: true,
});
layer.add(image);
image.cache();
image.filters([Konva.Filters.Brighten]);
image.brightness(0.3);
const slider = document.createElement('input');
slider.type = 'range';
slider.min = '-1';
slider.max = '1';
slider.step = '0.1';
slider.value = image.brightness();
slider.style.position = 'absolute';
slider.style.top = '20px';
slider.style.left = '20px';
slider.addEventListener('input', (e) => {
const value = parseFloat(e.target.value);
image.brightness(value);
});
document.body.appendChild(slider);
};
imageObj.src = 'https://konvajs.org/assets/darth-vader.jpg';
imageObj.crossOrigin = 'anonymous';
import { Stage, Layer, Image } from 'react-konva';
import { useState, useEffect, useRef } from 'react';
import useImage from 'use-image';
const App = () => {
const [brightness, setBrightness] = useState(0.3);
const [image] = useImage('https://konvajs.org/assets/darth-vader.jpg', 'anonymous');
const imageRef = useRef(null);
useEffect(() => {
if (image && imageRef.current) {
imageRef.current.cache();
}
}, [image]);
return (
<>
<Stage width={window.innerWidth} height={window.innerHeight}>
<Layer>
<Image
ref={imageRef}
x={50}
y={50}
image={image}
draggable
filters={[Konva.Filters.Brighten]}
brightness={brightness}
/>
</Layer>
</Stage>
<input
type="range"
min="-1"
max="1"
step="0.1"
value={brightness}
onChange={(e) => setBrightness(parseFloat(e.target.value))}
style={{ position: 'absolute', top: '20px', left: '20px' }}
/>
</>
);
};
export default App;
<template>
<div>
<v-stage :config="stageSize">
<v-layer>
<v-image
ref="imageNode"
:config="{
x: 50,
y: 50,
image: image,
draggable: true,
filters: [Konva.Filters.Brighten],
brightness: brightness,
}"
/>
</v-layer>
</v-stage>
<input
type="range"
min="-1"
max="1"
step="0.1"
:value="brightness"
@input="handleSlider"
style="position: absolute; top: 20px; left: 20px"
/>
</div>
</template>
<script setup>
import { ref, watch, nextTick } from 'vue';
import { useImage } from 'vue-konva';
import Konva from 'konva';
const stageSize = {
width: window.innerWidth,
height: window.innerHeight,
};
const brightness = ref(0.3);
const imageNode = ref(null);
const [image] = useImage('https://konvajs.org/assets/darth-vader.jpg', 'anonymous');
watch(image, async (newImage) => {
if (newImage) {
await nextTick();
imageNode.value.getNode().cache();
}
});
const handleSlider = (e) => {
brightness.value = parseFloat(e.target.value);
};
</script>