| sidebar_position | 90 |
|---|
import PixelateDemo from './demos/pixelate.demo.tsx';
Reduces the level of detail in an image by replacing groups of pixels with a single representative pixel, creating a blocky or mosaic-like appearance.
🖼️ Image options and parameters of pixelate method
Pixelate filter is a digital image processing technique used to reduce the level of detail in an image by replacing groups of pixels with a single, average color value. This creates a mosaic-like effect where the image appears to be composed of larger, blocky elements rather than fine details.
| Image property | What it means | Possible values |
|---|---|---|
bitDepth |
number of bits per channel | [8,16] |
components |
number of components | any |
alpha |
is alpha channel allowed | true |
options
| Property | Required | Default value |
|---|---|---|
cellSize |
yes | - |
algorithm |
no | center |
out |
no | - |
Implementation
Here's how pixelate filter is implemented in ImageJS:
Grid Division: The first step is to divide the image into a grid of cells. Each cell will represent a block of pixels that will be replaced by a single color in the pixelated version.The size of the grid cells determines the degree of pixelation. Larger grid cells create a more pronounced pixelation effect.
Color Sampling: Within each grid cell, the filter samples the colors of the pixels contained in that cell. It can sample it in different algorithms, depending on what the user wants and what algorithm options it chooses.
Color Replacement: After obtaining the color for each grid cell, the filter replaces the color of all the pixels within that cell with the calculated sampling color. This effectively reduces the amount of color variation within each cell, resulting in a blocky appearance.
Since each grid cell now represents a larger area of the original image, the fine details are lost, and the image appears pixelated or mosaic-like.