HTML5 Canvas RGB filter Image Tutorial

To apply filter to an Konva.Image, we have to cache it first with cache() function. Then apply filter with filters() function.

To change rgb components of an image with Konva, we can use the Konva.Filters.RGB.

Instructions: Slide the controls to change RGB values.

For all available filters go to Filters Documentation.

Vanilla

import Konva from 'konva';

const stage = new Konva.Stage({
  container: 'container',
  width: window.innerWidth,
  height: window.innerHeight,
});

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.RGB]);
  image.red(100);
  image.green(100);
  image.blue(100);

  // create sliders
  const createSlider = (label, property) => {
    const container = document.createElement('div');
    container.style.position = 'absolute';
    container.style.left = '20px';
    
    const text = document.createElement('span');
    text.textContent = `${label}: `;
    container.appendChild(text);
    
    const slider = document.createElement('input');
    slider.type = 'range';
    slider.min = '0';
    slider.max = '255';
    slider.step = '1';
    slider.value = image[property]();
    slider.style.width = '200px';
    
    slider.addEventListener('input', (e) => {
      const value = parseInt(e.target.value);
      image[property](value);
      layer.batchDraw();
    });
    
    container.appendChild(slider);
    return container;
  };

  const redSlider = createSlider('Red', 'red');
  redSlider.style.top = '20px';
  document.body.appendChild(redSlider);

  const greenSlider = createSlider('Green', 'green');
  greenSlider.style.top = '45px';
  document.body.appendChild(greenSlider);

  const blueSlider = createSlider('Blue', 'blue');
  blueSlider.style.top = '70px';
  document.body.appendChild(blueSlider);
};
imageObj.src = '/images/lion.png';

Open Sandbox

React

import { Stage, Layer, Image } from 'react-konva';
import { useState, useEffect } from 'react';

const App = () => {
  const [image, setImage] = useState(null);
  const [red, setRed] = useState(100);
  const [green, setGreen] = useState(100);
  const [blue, setBlue] = useState(100);

  useEffect(() => {
    const imageObj = new Image();
    imageObj.onload = () => {
      setImage(imageObj);
    };
    imageObj.src = '/images/lion.png';
  }, []);

  const SliderControl = ({ label, value, onChange }) => (
    <div style={{ margin: '10px' }}>
      <label>{label}: </label>
      <input
        type="range"
        min="0"
        max="255"
        step="1"
        value={value}
        onChange={(e) => onChange(parseInt(e.target.value))}
        style={{ width: '200px' }}
      />
    </div>
  );

  return (
    <>
      <div style={{ position: 'absolute', top: '20px', left: '20px' }}>
        <SliderControl
          label="Red"
          value={red}
          onChange={setRed}
        />
        <SliderControl
          label="Green"
          value={green}
          onChange={setGreen}
        />
        <SliderControl
          label="Blue"
          value={blue}
          onChange={setBlue}
        />
      </div>
      <Stage width={window.innerWidth} height={window.innerHeight}>
        <Layer>
          {image && (
            <Image
              x={50}
              y={50}
              image={image}
              draggable
              filters={[Konva.Filters.RGB]}
              red={red}
              green={green}
              blue={blue}
            />
          )}
        </Layer>
      </Stage>
    </>
  );
};

export default App;

Open Sandbox

Vue

<template>
  <div>
    <div style="position: absolute; top: 20px; left: 20px">
      <div v-for="control in controls" :key="control.label" style="margin: 10px">
        <label>{{ control.label }}: </label>
        <input
          type="range"
          min="0"
          max="255"
          step="1"
          :value="control.value"
          @input="(e) => updateValue(control.prop, parseInt(e.target.value))"
          style="width: 200px"
        />
      </div>
    </div>
    <v-stage :config="stageSize">
      <v-layer>
        <v-image
          v-if="image"
          :config="{
            x: 50,
            y: 50,
            image: image,
            draggable: true,
            filters: [Konva.Filters.RGB],
            red: rgbValues.red,
            green: rgbValues.green,
            blue: rgbValues.blue,
          }"
        />
      </v-layer>
    </v-stage>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';

const stageSize = {
  width: window.innerWidth,
  height: window.innerHeight,
};

const image = ref(null);
const rgbValues = ref({
  red: 100,
  green: 100,
  blue: 100,
});

const controls = computed(() => [
  { label: 'Red', prop: 'red', value: rgbValues.value.red },
  { label: 'Green', prop: 'green', value: rgbValues.value.green },
  { label: 'Blue', prop: 'blue', value: rgbValues.value.blue },
]);

const updateValue = (prop, value) => {
  rgbValues.value[prop] = value;
};

onMounted(() => {
  const imageObj = new Image();
  imageObj.onload = () => {
    image.value = imageObj;
  };
  imageObj.src = '/images/lion.png';
});
</script>

Open Sandbox