HTML5 Canvas Pixelate filter Image Tutorial

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

To change pixelate effect of an image with Konva, we can use the Konva.Filters.Pixelate.

Instructions: Slide the control to change pixel size value.

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.Pixelate]);
  image.pixelSize(8);

  // create slider
  const container = document.createElement('div');
  container.style.position = 'absolute';
  container.style.top = '20px';
  container.style.left = '20px';
  
  const text = document.createElement('span');
  text.textContent = 'Pixel Size: ';
  container.appendChild(text);
  
  const slider = document.createElement('input');
  slider.type = 'range';
  slider.min = '2';
  slider.max = '32';
  slider.step = '1';
  slider.value = image.pixelSize();
  slider.style.width = '200px';
  
  slider.addEventListener('input', (e) => {
    const value = parseInt(e.target.value);
    image.pixelSize(value);
    layer.batchDraw();
  });
  
  container.appendChild(slider);
  document.body.appendChild(container);
};
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 [pixelSize, setPixelSize] = useState(8);

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

  return (
    <>
      <div style={{ position: 'absolute', top: '20px', left: '20px' }}>
        <label>Pixel Size: </label>
        <input
          type="range"
          min="2"
          max="32"
          step="1"
          value={pixelSize}
          onChange={(e) => setPixelSize(parseInt(e.target.value))}
          style={{ width: '200px' }}
        />
      </div>
      <Stage width={window.innerWidth} height={window.innerHeight}>
        <Layer>
          {image && (
            <Image
              x={50}
              y={50}
              image={image}
              draggable
              filters={[Konva.Filters.Pixelate]}
              pixelSize={pixelSize}
            />
          )}
        </Layer>
      </Stage>
    </>
  );
};

export default App;

Open Sandbox

Vue

<template>
  <div>
    <div style="position: absolute; top: 20px; left: 20px">
      <label>Pixel Size: </label>
      <input
        type="range"
        min="2"
        max="32"
        step="1"
        :value="pixelSize"
        @input="(e) => pixelSize = parseInt(e.target.value)"
        style="width: 200px"
      />
    </div>
    <v-stage :config="stageSize">
      <v-layer>
        <v-image
          v-if="image"
          :config="{
            x: 50,
            y: 50,
            image: image,
            draggable: true,
            filters: [Konva.Filters.Pixelate],
            pixelSize: pixelSize,
          }"
        />
      </v-layer>
    </v-stage>
  </div>
</template>

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

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

const image = ref(null);
const pixelSize = ref(8);

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

Open Sandbox