How to pixelate a BufferedImage so it looks like that?

Question

I am doing Image Processing and I want to pixelate an Image which was dithered before but it should still look like the original. Here I show you some examples what Iam doing right now and what I want it to look like:

That is the Image I want to modify.

Thats the image after beeing dithered by the "floyd steinberg dithering".

Thats how he should look at the end after beeing pixelated.

And thats how my image looks like after pixelating. I dont really know what to do so it looks like the image above.

I searched up the whole internet and I tried every pixelating algorithm. Thats the class Iam using at the moment:

import java.awt.*;
import java.awt.image.BufferedImage;
import java.util.*;
import java.util.List;

public final class ImageUtil {

public static BufferedImage pixelate(BufferedImage imageToPixelate, int pixelSize) {
    BufferedImage pixelateImage = new BufferedImage(
        imageToPixelate.getWidth(),
        imageToPixelate.getHeight(),
        imageToPixelate.getType());

    for (int y = 0; y < imageToPixelate.getHeight(); y += pixelSize) {
        for (int x = 0; x < imageToPixelate.getWidth(); x += pixelSize) {
            BufferedImage croppedImage = getCroppedImage(imageToPixelate, x, y, pixelSize, pixelSize);
            Color dominantColor = getDominantColor(croppedImage);
            for (int yd = y; (yd < y + pixelSize) && (yd < pixelateImage.getHeight()); yd++) {
                for (int xd = x; (xd < x + pixelSize) && (xd < pixelateImage.getWidth()); xd++) {
                    pixelateImage.setRGB(xd, yd, dominantColor.getRGB());
                }
            }
        }
    }

    return pixelateImage;
}

public static BufferedImage getCroppedImage(BufferedImage image, int startx, int starty, int width, int height) {
    if (startx < 0) startx = 0;
    if (starty < 0) starty = 0;
    if (startx > image.getWidth()) startx = image.getWidth();
    if (starty > image.getHeight()) starty = image.getHeight();
    if (startx + width > image.getWidth()) width = image.getWidth() - startx;
    if (starty + height > image.getHeight()) height = image.getHeight() - starty;
    return image.getSubimage(startx, starty, width, height);
}

public static Color getDominantColor(BufferedImage image) {
    Map<Integer, Integer> colorCounter = new HashMap<>(100);
    for (int x = 0; x < image.getWidth(); x++) {
        for (int y = 0; y < image.getHeight(); y++) {
            int currentRGB = image.getRGB(x, y);
            int count = colorCounter.getOrDefault(currentRGB, 0);
            colorCounter.put(currentRGB, count + 1);
        }
    }
    return getDominantColor(colorCounter);
}

private static Color getDominantColor(Map<Integer, Integer> colorCounter) {
    int dominantRGB = colorCounter.entrySet().stream()
        .max((entry1, entry2) -> entry1.getValue() > entry2.getValue() ? 1 : -1)
        .get()
        .getKey();
    return new Color(dominantRGB);
}
}

And thats how I start it:

ImageUtil.pixelate(selectedImage, 3);

I appreciate your help and tell me if something is not clear or I need to add something to my question.

Answer 1

Here are the algorithmic stages you may apply:

• Down-sample original image - reduce resolution to about 200x200.
• Apply Palette with 16 colors with dithering.
  Check rgb2ind MATLAB documentation for details.
  In the example below, I found the palette using the reference image from your post.
• Resize up by a factor of x3 in each axis using nearest neighbor method to create the pixelate effect.

MATLAB implementation:

% Palette of 16 colors
P = [  0     0     0
     160    80    44
     210   122   170
      14    16    83
     254   254   254
     255   113     0
      99    48    13
       1    86   158
       4    93    13
     192   192   192
      75    75    75
     233   165     0
     167    85   115
      85    15   105
       1   178   255
     116    11     7];

%Read original image
I = imread('I.jpg');

%Resize original image to resolution 200x200
J = imresize(I, [200, 200]);

% Convert shrunk RGB image to indexed image using palette P.
[IND, map] = rgb2ind(J, double(P)/255, 'dither'); %figure;imagesc(IND);colormap(map);axis image

% Convert from indexed image to RGB
RGB = ind2rgb(IND, map); %figure;imshow(RGB);

% Resize RGB by factor of x3 in each axis, use nearest-neighbor interpolation.
K = imresize(RGB, 3, 'nearest');

figure;imshow(K);

Result:

There are some differences from your reference (probably due to different colors reduction algorithm).